選擇下拉菜單上的變化事件並沒有發生

Question

隨着在從選擇停留我們，我使用jquery彈出客人下拉菜單。

<form class="form-inline" method="get" action="#" th:action="#" id="search"> 
    <div class="input-group input-group-sm" style="margin:auto;" id="searchlocation"> 
     <select class="selectpicker form-control" style="margin-left:-1px;" id="stay"> 
      <option value="0" selected="selected">Stay Hours</option> 
      <option value="1">X</option> 
      <option value="2">Y</option> 
     </select> 
     <select class="selectpicker" style="margin-left:-2px;" id="guest"> 
      <option value="0" selected="selected">No. of guests</option> 
      <option value="1">1</option> 
      <option value="2">2 </option> 
      <option value="3">3</option> 
      <option value="4">4 </option> 
      <option value="5">5 </option> 
     </select> 
     <button type="text" class="form-control btn btn-success" style="margin-left:-1px;">Search</button> 
    </div> 
</form> 

的Jquery：

$('#stay').change(function() { 

    $('#guest').show(function() { 
     $("#guest").focus(); 
     $("#guest").click(); 
     $("#guest").select(); 
    }); 

}); 

但它不是爲我工作。有人可以幫助解決這個問題嗎？

Answer 1

你應該的guests道具改爲所需的索引： Plunker

$(function() { 
    $('#stay').change(function() { 
    $('#guest').show(function() { 
     $("#guest").focus().prop('selectedIndex', $('#stay').val()); 
    }); 
    }); 
});