Question

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

更新

例如，选择M我要隐藏<div> id＆＃34; c＆＃34;

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

参考：

Answer 2

你可以尝试这样的事情，并为你想要的每一个选择重复模式。

<强> HTML

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

根据所选值填充下拉列表

2 个答案: