-1

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 ?

w3spi
  • 4,380
  • 9
  • 47
  • 80
nand
  • 517
  • 2
  • 13
  • 29
  • What are you actually trying to achieve? Programmatically drop down the option list in `#guest`? Please define "not working". – Teemu Sep 07 '15 at 14:19
  • @Teemu Dropdown menu attached to id="guest" is not coming after change event happening in id="stay" ? cau you guide me why drop down menu is coming automatically ? – nand Sep 07 '15 at 16:03
  • Please check [this answer](http://stackoverflow.com/a/10136523/1169519). – Teemu Sep 07 '15 at 17:40

1 Answers1

0

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

$(function() {
  $('#stay').change(function() {
    $('#guest').show(function() {
      $("#guest").focus().prop('selectedIndex', $('#stay').val());
    });
  });
});
Vicky Gonsalves
  • 11,593
  • 2
  • 37
  • 58
  • yes its working . How can I make drop down come so that user can select desire option from given drop down menu? – nand Sep 07 '15 at 16:16
  • but https://www.airbnb.com/ have implemented it. Can you tell me magic behind it ? – nand Sep 07 '15 at 16:32
  • I dont see they have implemented.. If you really want to do that you might want to use custom plugin such as select2 : https://select2.github.io/ – Vicky Gonsalves Sep 07 '15 at 16:38