1

我正在 jquery mobile 中创建州和城市的相关下拉列表。这对我不起作用。我也无法隐藏第二个下拉菜单。我正在使用的代码是：

的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>

和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;

        }
    });
});
4

1 回答 1

1

这是你想要的吗？jsFiddle：http: //jsfiddle.net/WXbbj/40/

创建所有选择：

<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>

基本上我使用 css 来隐藏“选择菜单”：

#selectmenu1,#selectmenu2{
display:none;
}

这是只显示正确选项的 jquery 函数：

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


  $("#selectmenu"+$(this).val()).show();
 }); });
于 2012-06-19T12:20:02.333 回答