CODEWITHSUNDEEP
jquery-mobiledrop-down-menu
user1456131
user1456131

Reputation: 49

Dependent drop down in jquery mobile not working

I am creating a dependent drop down list of states & city in jquery mobile. which is not working for me. I am unable to hide the 2nd drop down too. The code i am using is:

The html:

     <select name="selectmenu5" id="selectmenu5">
     <option value="0">Select State</option>   
     <option value="1">Andaman and Nicobar</option>  
     <option value="2">Andhra Pradesh</option>  
</select>

        <select name="selectmenu4" id="selectmenu4">
          <option class="city" id="1">Select City</option>
          <option class="city" id="2">option 2</option>
          <option class="city" id="3">Option 3</option>
    </select>

and the js:

    $(document).ready(function() {
        $("#selectmenu4").hide();
    $("#selectmenu5").live("change",function() {
       $("#selectmenu4").show();
        switch($("#this").val()){ 
            case "1":
                $(".city").hide().parent().find("#1").show();
                break;
            case "2":
                $(".city").hide().parent().find("#2").show();
                break;

        }
    });
});

Upvotes: 1

Views: 1547

Answers (1)

Th0rndike
Th0rndike

Reputation: 3436

Is this what you want? jsFiddle: http://jsfiddle.net/WXbbj/40/

Create all the selects:

<select name="selectmenu5" id="selectmenu5">
 <option value="0">Select State</option>   
 <option value="1">Andaman and Nicobar</option>  
 <option value="2">Andhra Pradesh</option>  


    <select class='cityList' name="selectmenu1" id="selectmenu1">
      <option class="city" id="0">Select City</option>
      <option class="city" id="1">city1</option>
      <option class="city" id="2">city2</option>
</select>

 <select class='cityList' id="selectmenu2">
      <option class="city" id="0">Select City</option>
      <option class="city" id="1">city3</option>
      <option class="city" id="2">city4</option>
</select>

Basically i use css to hide the "selectmenu" :

#selectmenu1,#selectmenu2{
display:none;
}

And this is the jquery function to show only the right options:

 $(document).ready(function() {         
  $("#selectmenu5").on("change",function() {        
  $(".cityList").hide();         


  $("#selectmenu"+$(this).val()).show();
 }); });

Upvotes: 1

Related Questions