Question

我有两个下拉列表;一个与州，另一个与城市。我希望城市的第二个列表仅显示处于选定状态的城市。为什么这不起作用？

$(document).ready(function($) {
  $("#state").change(function() {
    var selected_state = $("#state").val(); //get the selected state
    $("#city").children().hide(); //hide all the options
    $("#selected_state").children().show(); //only show cities in selected state
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post">
  State: <select name="state" id="state">
            <option value="state1">State1</option>
            <option value="state2">State2</option>
        </select> City:
  <select name="city" id="city">
            <div id="state1">
               <option value="0">City1a</option>
               <option value="1">City1b</option>
               <option value="2">City1c</option>
            </div>
            <div id="state2">
               <option value="3">City2a</option>
               <option value="4">City2b</option>
               <option value="5">City2c</option>
            </div>
        </select>
  <input name="submit" type="submit" value="Submit" />
</form>

Answer 1

您应该在states和cities之间建立链接，例如data-state：

<option value="0" data-state="state1">City1a</option>

$("#state").change(function() {
  var selected_state = $(this).val();
$('#city').removeAttr('disabled').children('option').hide();
  $('#city option[data-state="' + selected_state + '"]').show();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post">

  <label>State:</label>
  <select name="state" id="state">
 <option>-- choose state--</option>
<option value="state1">State1</option>
<option value="state2">State2</option>
</select>

  <label>City:</label>
  <select name="city" id="city" disabled>
 <option>-- choose city --</option>
<option value="0" data-state="state1">City1a</option>
<option value="1" data-state="state1">City1b</option>
<option value="2" data-state="state1">City1c</option>
<option value="3" data-state="state2">City2a</option>
<option value="4" data-state="state2">City2b</option>
<option value="5" data-state="state2">City2c</option>
</select>

  <input name="submit" type="submit" value="Submit" />
</form>

并且不要用options或其他任何内容包裹div，这是无效的。

Answer 2

代码中的问题

selected_state是变量
无法在选择选项中放置div

$(document).ready(function($) {
  $("#state").change(function() {
    var selected_state = $("#state").val(); // get the selected state
    $("#city").children().hide(); // hide all the options
    $("." + selected_state).show(); // only show cities in selected state
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post">
  State: 
  <select name="state" id="state">
      <option value="state1">State1</option>
      <option value="state2">State2</option>
  </select> City:
   
   <select name="city" id="city">
    <option class="state0" value="-1">-select city-</option>
         <option class="state1" value="0">City1a</option>
         <option class="state1" value="1">City1b</option>
         <option class="state1" value="2">City1c</option>

         <option class="state2" value="3">City2a</option>
         <option class="state2" value="4">City2b</option>
         <option class="state2" value="5">City2c</option>
  </select>
  
  <input name="submit" type="submit" value="Submit" />
</form>

Answer 3

不要在select中使用div。
您使用selected_state的方式不是如何使用它。
您应该能够与下拉列表建立关系。

这样的事情是你必须要做的。

<form method="post">
State: <select name="state" id="state">
    <option value="">Select</option>
    <option value="state1">State1</option>
    <option value="state2">State2</option>
</select>
City: 
<select name="city" id="city">

</select>     
<input name="submit" type="submit" value="Submit" />

    $(document).ready(function($) {     
    $("#state").change(function() {
        var selected_state =$("#state option:selected").val(); //get the selected state
        GetAllCityByState(selected_state);
    });

        function GetAllCityByState(stateid) {
        $("#city").html('');
        $("#city").empty();
        if(stateid == "state1")
        {
          $("#city").append($("<option></option>").val(0).html("City1a"));
          $("#city").append($("<option></option>").val(1).html("City1b"));
          $("#city").append($("<option></option>").val(2).html("City1c"));
        }
        else if(stateid == "state2")
        {
          $("#city").append($("<option></option>").val(3).html("City2a"));
          $("#city").append($("<option></option>").val(4).html("City2b"));
          $("#city").append($("<option></option>").val(5).html("City2c"));
        }
        $("#city").select().val();
    }
});

请找小提琴here

Answer 4

不要在select里面使用div。你可以这样试试。

$(document).ready(function($) {
  var c1 = '<option value="0">City1a</option><optionvalue="1">City1b</option><option value="2">City1c</option>'
  var c2 = ' <option value="3">City2a</option> <option value="4">City2b</option><option value="5">City2c</option>'
  $("#city").html(c1);
  $("#state").change(function() {
$("#city").html('');

var selected_state = $("#state").val(); //get the selected state
if (selected_state == 'state1')
  $("#city").html(c1);
else
  $("#city").html(c2);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post">
  State: <select name="state" id="state">
            <option value="state1">State1</option>
            <option value="state2">State2</option>
        </select> City:
  <select name="city" id="city">
            
  </select>
  <input name="submit" type="submit" value="Submit" />
</form>

Answer 5

do_upload

<form method="post">
State: <select name="state" id="state">
    <option value="state1">State1</option>
    <option value="state2">State2</option>
</select>
City: 
    <div id="state1">
    <select name="city" id="city">
       <option value="0">City1a</option>
       <option value="1">City1b</option>
       <option value="2">City1c</option>
       </select>
    </div>
    <div id="state2">
    <select name="city" id="city">
       <option value="3">City2a</option>
       <option value="4">City2b</option>
       <option value="5">City2c</option>
    </select>  
    </div>

<input name="submit" type="submit" value="Submit" />

Answer 6

您可以使用optgroup标记而不是div来包装您的选项，因此您的HTML将如下所示：

<form method="post">
    State: <select name="state" id="state">
        <option value="state1">State1</option>
        <option value="state2">State2</option>
    </select>
    City: 
    <select name="city" id="city">
        <optgroup label="state1" id='state1'>
           <option value="0">City1a</option>
           <option value="1">City1b</option>
           <option value="2">City1c</option>
        </optgroup>
        <optgroup label="state2" id='state2'>
           <option value="3">City2a</option>
           <option value="4">City2b</option>
           <option value="5">City2c</option>
        </optgroup>
    </select>     
    <input name="submit" type="submit" value="Submit" />
</form>

然后，代码中的一些小改动：

$("#state").change(function() {
    var selected_state =$("#state").val(); //get the selected state


    $("#city optgroup").not('#'+selected_state).hide();
    $("#"+selected_state).show(); //only show cities in selected state
    $('#city').val($("#"+selected_state).children().first().val());

});

演示：

 $("#state").change(function() {
        var selected_state =$("#state").val(); //get the selected state
        
        
        $("#city optgroup").not('#'+selected_state).hide();
        $("#"+selected_state).show(); //only show cities in selected state
        $('#city').val($("#"+selected_state).children().first().val());
      
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post">
    State: <select name="state" id="state">
        <option value="state1">State1</option>
        <option value="state2">State2</option>
    </select>
    City: 
    <select name="city" id="city">
        <optgroup label="state1" id='state1'>
           <option value="0">City1a</option>
           <option value="1">City1b</option>
           <option value="2">City1c</option>
        </optgroup>
        <optgroup label="state2" id='state2'>
           <option value="3">City2a</option>
           <option value="4">City2b</option>
           <option value="5">City2c</option>
        </optgroup>
    </select>     
    <input name="submit" type="submit" value="Submit" />
</form>

如您所见，现在代码指向变量（id是变量），并且您的html有效（没有div iniside select）。

Answer 7

你无法处理风格选项 How to remove/hide select options from select-list

＆＃13;

$(document).ready(function($) {

  var states = {
            "state1":["City1a","City1b", "City1c"]
            ,
            "state2":["City2a" , "City2b", "City2c"]
            };
  var state_option = (state) => states[state].map( (s,n)=> '<option value="'+n+'">'+s+'</option>' ).join();  
  $("#city").html( state_option("state1") );
  $("#state").change(function() {
    var selected_state = $("#state").val(); //get the selected state
    $("#city").html( state_option(selected_state) );
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post">
  State: <select name="state" id="state">
            <option value="state1">State1</option>
            <option value="state2">State2</option>
        </select> City:
        <select name="city" id="city">
        </select>
  <input name="submit" type="submit" value="Submit" />
</form>

＆＃13;

如何使用jQuery

7 个答案: