Question

我正在创建一个依赖的状态下拉列表＆amp; jquery移动城市。这不适合我。我也无法隐藏第二滴。我正在使用的代码是：

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;

        }
    });
});

Answer 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来隐藏“selectmenu”：

#selectmenu1,#selectmenu2{
display:none;
}

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

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


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

jquery mobile中的依赖性下拉不起作用

1 个答案: