select drop down menu on change event is not happening

Question

With in a from on selection of stay ours , I am tring to pop up No. of Guests drop down menu using 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();
    });

});

But its not working for me. Can some one help to resolve this ?

Answer 1

You should change the prop of guests to desired index: Plunker

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