Dependent drop down in jquery mobile not working - jquery-mobile

Question

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;
}
});
});

Answer 1

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