根据选定的值填充下拉列表

Question

我有四个下拉列表，每个下拉列表都有相应的Id。我希望根据drop down1中选定的值隐藏并显示第二个下拉列表。

更新：

例如，在选择M时，我希望隐藏具有id "c“的<div>

<div id="b" class="span-6 ">
 <select>
   <option value="F">F</option>
   <option value="M">M</option>
  </select>
</div>
<div id="c" class="span-6 ">
   <select>
     <option value="S">S</option>
     <option value="M">M</option>
   </select>
</div>

Answer 1

您可以从以下几方面进行尝试：

​

$("select").change(function() {
  $(this).next("select").toggleClass("hidden", this.value == "no")
});

.hidden {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
  <option></option>
  <option value="yes">Yes</option>
  <option value="no">No</option>
</select>
<select class="hidden">
  <option></option>
  <option value="yes">Yes</option>
  <option value="no">No</option>
</select>
<select class="hidden">
  <option></option>
  <option value="yes">Yes</option>
  <option value="no">No</option>
</select>

​

根据评论更新的答复：

​

$("select").change(function() {
  $(this).parent().next().toggleClass("hidden", this.value == "M")
});

.hidden {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="b" class="span-6 ">
  <select>
    <option value="F">F</option>
    <option value="M">M</option>
  </select>
</div>
<div id="c" class="span-6 ">
  <select>
    <option value="S">S</option>
    <option value="M">M</option>
  </select>
</div>

​

参考资料：

• 家长()
• 下一次()
• toggleClass()
• jQuery选择器

Answer 2

您可以尝试这样的方法，并为您想要的每一个选择重复该模式。

<select id="slc1">
    <option value="0">No</option>
    <option value="1">Yes</option>
</select>

<select id="slc2" style="display: none">
    <option value="0">No</option>
    <option value="1">Yes</option>
</select>

JS

$( "#slc1" ).change(function () {
    value = $("#slc1").val();
    if ( value === '0' ) $( "#slc2" ).hide();
    else if (value === '1') $( "#slc2" ).show();
});