Javascript 未发生更改事件时选择下拉菜单

在一个从上到下的住宿选择中，我尝试使用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>

---

但这对我不起作用。有人能帮忙解决这个问题吗

您应该将来宾的道具更改为所需的索引：

---

你到底想达到什么目的？以编程方式下拉guest中的选项列表？请定义“不工作”。@id=guest的Teemu下拉菜单在id=stay中发生更改事件后不出现？你能告诉我为什么下拉菜单会自动出现吗？请检查。是的，它在工作。我怎样才能使下拉菜单出现，以便用户可以从给定的下拉菜单中选择所需的选项？但我已经实现了它。你能告诉我它背后的魔力吗？我看不出他们已经实现了。。如果您真的想这样做，您可能需要使用自定义插件，如select2:

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

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

});

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