根据所选值填充下拉列表

Question

I have four drop down and each drop down having corresponding Id's. I want to hide and show second drop down on the basis of selected value from drop down1.

Update:

For example, on the selection of M I want to hide <div> having id "c"

<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

You can try something along the following:

 $("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> 

---

Updated answer according to comments:

 $("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> 

Reference:

• parent()
• next()
• toggleClass()
• jQuery selectors

Answer 2

You can try something like this and repeat the pattern for every select you want.

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