未發生更改事件時選擇下拉菜單

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>

查詢：

$('#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());
    });
  });
});