3级依赖下拉菜单的jQuery

Question

Hey everyone so I'm pretty new when it comes to Jquery & javascript & i'm working with some code left over from a previous developer. I need the values that show in each dropdown menu to be dependent on the one above it, and only the correct values to show for each option. I've looked around and have found information on 2-stage dropdowns in this way, but never on adding an extra stage after that. Here's the code I have below:

 $(function(){ var $cat = $("#category1"), $subcat = $("#category2"), $volt = $("#category3"); $cat.on("change",function(){ var _rel = $(this).val(); $subcat.find("option").attr("style",""); $subcat.val(""); if(!_rel) return $subcat.prop("disabled",true); $subcat.find("[rel="+_rel+"]").show(); $subcat.prop("disabled",false); }); $subcat.on("change",function(){ var _rel = $(this).val(); $volt.find("option").attr("style",""); $volt.val(""); if(!_rel) return $volt.prop("disabled",true); $volt.find("[rel="+_rel+_rel+"]").show(); $volt.prop("disabled",false); }); }); 

 #category2 option{ display:none; } #category2 option.label{ display:block; } #category3 option{ display:none; } #category3 option.label{ display:block; } 

 <script src="//code.jquery.com/jquery-1.11.2.min.js"></script> <form id="formname" name="formname" method="post" action="submitform.asp" > <table width="50%" border="0" cellspacing="0" cellpadding="5"> <tr> <td width="41%" align="right" valign="middle">First Dropdown Menu:</td> <td width="59%" align="left" valign="middle"> <select name="category1" id="category1"> <option value="">Please Select</option> <option value="Option1">ONE</option> <option value="Option2">TWO</option> <option value="Option3">THREE</option> <option value="Option4">FOUR</option> </select> </td> </tr> <form id="formname1" name="formname1" method="post" action="submitform.asp" > <tr> <td align="right" valign="middle">Second Dropdown Menu:</td> <td align="left" valign="middle"> <select disabled="disabled" id="category2" name="category2"> <option class="label" value>Please Select</option> <!-- R --> <option rel="Option1" value="R12">12</option> <option rel="Option1" value="R24">24</option> <option rel="Option1" value="R36">36</option> <option rel="Option1" value="R48">48</option> <option rel="Option1" value="R80">80</option> <!-- H --> <option rel="Option2" value="H12">12</option> <option rel="Option2" value="H24">24</option> <option rel="Option2" value="H36">36</option> <option rel="Option2" value="H48">48</option> <option rel="Option2" value="H80">80</option> <!-- L --> <option rel="Option3" value="L12">12</option> <option rel="Option3" value="L24">24</option> <option rel="Option3" value="L36">36</option> <option rel="Option3" value="L48">48</option> <option rel="Option3" value="L80">80</option> <!-- B --> <option rel="Option4" value="B12">12</option> <option rel="Option4" value="B24">24</option> <option rel="Option4" value="B36">36</option> <option rel="Option4" value="B48">48</option> <option rel="Option4" value="B80">80</option> </select> </td> </tr> <form id="formname2" name="formname2" method="post" action="submitform.asp" > <tr> <td align="right" valign="middle">Third Dropdown Menu</td> <td align="left" valign="middle"> <select disabled="disabled" id="category3" name="category3"> <option class="label" value>Please Select</option> <!-- R --> <option rel="R12" value="12v1">R12V1</option> <option rel="R24" value="R24v1">R24V1</option> <option rel="R36" value="R36v1">R36V1</option> <option rel="R48" value="R48v1">R48V1</option> <option rel="R80" value="R80v1">R80V1</option> <!-- H --> <option rel="H12" value="H12v1">H12V1</option> <option rel="H24" value="H24v1">H24V1</option> <option rel="H36" value="H36v1">H36V1</option> <option rel="H48" value="H48v1">H48V1</option> <option rel="H80" value="H80v1">H80V1</option> <!-- L --> <option rel="L12" value="L12v1">L12V1</option> <option rel="L24" value="L24v1">L24V1</option> <option rel="L36" value="L36v1">L36V1</option> <option rel="L48" value="L48v1">L48V1</option> <option rel="L80" value="L80v1">L80V1</option> <!-- B --> <option rel="B12" value="B12v1">B12V1</option> <option rel="B24" value="B24v1">B24V1</option> <option rel="B36" value="B36v1">B36V1</option> <option rel="B48" value="B48v1">B48V1</option> <option rel="B80" value="B80v1">B80V1</option> </select> </td> </tr> </table> </form> </html> 

I can get the 2nd menu to work correctly, but the third menu always just shows everything, or doesn't work at all. I can't get it to depend on the values of the 2nd menu. Does anyone know how to solve this? Any help would be much appreciated.

Answer 1

You needed to change

$volt.find("[rel="+_rel+_rel+"]").show();

into

$volt.find("[rel="+_rel+"]").show();

 $(function(){ var $cat = $("#category1"), $subcat = $("#category2"), $volt = $("#category3"); $cat.on("change",function(){ var _rel = $(this).val(); $subcat.find("option").attr("style",""); $subcat.val(""); if(!_rel) return $subcat.prop("disabled",true); $subcat.find("[rel="+_rel+"]").show(); $subcat.prop("disabled",false); }); $subcat.on("change",function(){ debugger; var _rel = $(this).val(); $volt.find("option").attr("style",""); $volt.val(""); if(!_rel) return $volt.prop("disabled",true); $volt.find("[rel="+_rel+"]").show(); $volt.prop("disabled",false); }); }); 

 #category2 option{ display:none; } #category2 option.label{ display:block; } #category3 option{ display:none; } #category3 option.label{ display:block; } 

 <script src="//code.jquery.com/jquery-1.11.2.min.js"></script> <form id="formname" name="formname" method="post" action="submitform.asp" > <table width="50%" border="0" cellspacing="0" cellpadding="5"> <tr> <td width="41%" align="right" valign="middle">First Dropdown Menu:</td> <td width="59%" align="left" valign="middle"> <select name="category1" id="category1"> <option value="">Please Select</option> <option value="Option1">ONE</option> <option value="Option2">TWO</option> <option value="Option3">THREE</option> <option value="Option4">FOUR</option> </select> </td> </tr> <form id="formname1" name="formname1" method="post" action="submitform.asp" > <tr> <td align="right" valign="middle">Second Dropdown Menu:</td> <td align="left" valign="middle"> <select disabled="disabled" id="category2" name="category2"> <option class="label" value>Please Select</option> <!-- R --> <option rel="Option1" value="R12">12</option> <option rel="Option1" value="R24">24</option> <option rel="Option1" value="R36">36</option> <option rel="Option1" value="R48">48</option> <option rel="Option1" value="R80">80</option> <!-- H --> <option rel="Option2" value="H12">12</option> <option rel="Option2" value="H24">24</option> <option rel="Option2" value="H36">36</option> <option rel="Option2" value="H48">48</option> <option rel="Option2" value="H80">80</option> <!-- L --> <option rel="Option3" value="L12">12</option> <option rel="Option3" value="L24">24</option> <option rel="Option3" value="L36">36</option> <option rel="Option3" value="L48">48</option> <option rel="Option3" value="L80">80</option> <!-- B --> <option rel="Option4" value="B12">12</option> <option rel="Option4" value="B24">24</option> <option rel="Option4" value="B36">36</option> <option rel="Option4" value="B48">48</option> <option rel="Option4" value="B80">80</option> </select> </td> </tr> <form id="formname2" name="formname2" method="post" action="submitform.asp" > <tr> <td align="right" valign="middle">Third Dropdown Menu</td> <td align="left" valign="middle"> <select disabled="disabled" id="category3" name="category3"> <option class="label" value>Please Select</option> <!-- R --> <option rel="R12" value="12v1">R12V1</option> <option rel="R24" value="R24v1">R24V1</option> <option rel="R36" value="R36v1">R36V1</option> <option rel="R48" value="R48v1">R48V1</option> <option rel="R80" value="R80v1">R80V1</option> <!-- H --> <option rel="H12" value="H12v1">H12V1</option> <option rel="H24" value="H24v1">H24V1</option> <option rel="H36" value="H36v1">H36V1</option> <option rel="H48" value="H48v1">H48V1</option> <option rel="H80" value="H80v1">H80V1</option> <!-- L --> <option rel="L12" value="L12v1">L12V1</option> <option rel="L24" value="L24v1">L24V1</option> <option rel="L36" value="L36v1">L36V1</option> <option rel="L48" value="L48v1">L48V1</option> <option rel="L80" value="L80v1">L80V1</option> <!-- B --> <option rel="B12" value="B12v1">B12V1</option> <option rel="B24" value="B24v1">B24V1</option> <option rel="B36" value="B36v1">B36V1</option> <option rel="B48" value="B48v1">B48V1</option> <option rel="B80" value="B80v1">B80V1</option> </select> </td> </tr> </table> </form> 

Answer 2

The problem is that you are specifying _rel twice in
$volt.find("[rel="+_rel+_rel+"]").show(); . Simply remove one of these.

I'd also recommend changing the second variable name to _rel2 , as in the following example:

 #category2 option{ display:none; } #category2 option.label{ display:block; } #category3 option{ display:none; } #category3 option.label{ display:block; } 

 <script src="//code.jquery.com/jquery-1.11.2.min.js"></script> <script> $(function(){ var $cat = $("#category1"), $subcat = $("#category2"), $volt = $("#category3"); $cat.on("change",function(){ var _rel = $(this).val(); $subcat.find("option").attr("style",""); $subcat.val(""); if(!_rel) return $subcat.prop("disabled",true); $subcat.find("[rel="+_rel+"]").show(); $subcat.prop("disabled",false); }); $subcat.on("change",function(){ var _rel2 = $(this).val(); $volt.find("option").attr("style",""); $volt.val(""); if(!_rel2) return $volt.prop("disabled",true); $volt.find("[rel="+_rel2+"]").show(); $volt.prop("disabled",false); }); }); </script> <form id="formname" name="formname" method="post" action="submitform.asp" > <table width="50%" border="0" cellspacing="0" cellpadding="5"> <tr> <td width="41%" align="right" valign="middle">First Dropdown Menu:</td> <td width="59%" align="left" valign="middle"> <select name="category1" id="category1"> <option value="">Please Select</option> <option value="Option1">ONE</option> <option value="Option2">TWO</option> <option value="Option3">THREE</option> <option value="Option4">FOUR</option> </select> </td> </tr> <form id="formname1" name="formname1" method="post" action="submitform.asp" > <tr> <td align="right" valign="middle">Second Dropdown Menu:</td> <td align="left" valign="middle"> <select disabled="disabled" id="category2" name="category2"> <option class="label" value>Please Select</option> <!-- R --> <option rel="Option1" value="R12">12</option> <option rel="Option1" value="R24">24</option> <option rel="Option1" value="R36">36</option> <option rel="Option1" value="R48">48</option> <option rel="Option1" value="R80">80</option> <!-- H --> <option rel="Option2" value="H12">12</option> <option rel="Option2" value="H24">24</option> <option rel="Option2" value="H36">36</option> <option rel="Option2" value="H48">48</option> <option rel="Option2" value="H80">80</option> <!-- L --> <option rel="Option3" value="L12">12</option> <option rel="Option3" value="L24">24</option> <option rel="Option3" value="L36">36</option> <option rel="Option3" value="L48">48</option> <option rel="Option3" value="L80">80</option> <!-- B --> <option rel="Option4" value="B12">12</option> <option rel="Option4" value="B24">24</option> <option rel="Option4" value="B36">36</option> <option rel="Option4" value="B48">48</option> <option rel="Option4" value="B80">80</option> </select> </td> </tr> <form id="formname2" name="formname2" method="post" action="submitform.asp" > <tr> <td align="right" valign="middle">Third Dropdown Menu</td> <td align="left" valign="middle"> <select disabled="disabled" id="category3" name="category3"> <option class="label" value>Please Select</option> <!-- R --> <option rel="R12" value="12v1">R12V1</option> <option rel="R24" value="R24v1">R24V1</option> <option rel="R36" value="R36v1">R36V1</option> <option rel="R48" value="R48v1">R48V1</option> <option rel="R80" value="R80v1">R80V1</option> <!-- H --> <option rel="H12" value="H12v1">H12V1</option> <option rel="H24" value="H24v1">H24V1</option> <option rel="H36" value="H36v1">H36V1</option> <option rel="H48" value="H48v1">H48V1</option> <option rel="H80" value="H80v1">H80V1</option> <!-- L --> <option rel="L12" value="L12v1">L12V1</option> <option rel="L24" value="L24v1">L24V1</option> <option rel="L36" value="L36v1">L36V1</option> <option rel="L48" value="L48v1">L48V1</option> <option rel="L80" value="L80v1">L80V1</option> <!-- B --> <option rel="B12" value="B12v1">B12V1</option> <option rel="B24" value="B24v1">B24V1</option> <option rel="B36" value="B36v1">B36V1</option> <option rel="B48" value="B48v1">B48V1</option> <option rel="B80" value="B80v1">B80V1</option> </select> </td> </tr> </table> </form> </html> 

Hope this helps! :)

Answer 3

You're code is almost perfect. You just need to adjust this line:

$volt.find("[rel="+_rel+"]").show();

to get the right value to show()

 $(function(){ var $cat = $("#category1"), $subcat = $("#category2"), $volt = $("#category3"); $cat.on("change",function(){ var _rel = $(this).val(); $subcat.find("option").attr("style",""); $subcat.val(""); if(!_rel) return $subcat.prop("disabled",true); $subcat.find("[rel="+_rel+"]").show(); $subcat.prop("disabled",false); }); $subcat.on("change",function(){ debugger; var _rel = $(this).val(); $volt.find("option").attr("style",""); $volt.val(""); if(!_rel) return $volt.prop("disabled",true); $volt.find("[rel="+_rel+"]").show(); $volt.prop("disabled",false); }); }); 

 #category2 option{ display:none; } #category2 option.label{ display:block; } #category3 option{ display:none; } #category3 option.label{ display:block; } 

 <script src="//code.jquery.com/jquery-1.11.2.min.js"></script> <form id="formname" name="formname" method="post" action="submitform.asp" > <table width="50%" border="0" cellspacing="0" cellpadding="5"> <tr> <td width="41%" align="right" valign="middle">First Dropdown Menu:</td> <td width="59%" align="left" valign="middle"> <select name="category1" id="category1"> <option value="">Please Select</option> <option value="Option1">ONE</option> <option value="Option2">TWO</option> <option value="Option3">THREE</option> <option value="Option4">FOUR</option> </select> </td> </tr> <form id="formname1" name="formname1" method="post" action="submitform.asp" > <tr> <td align="right" valign="middle">Second Dropdown Menu:</td> <td align="left" valign="middle"> <select disabled="disabled" id="category2" name="category2"> <option class="label" value>Please Select</option> <!-- R --> <option rel="Option1" value="R12">12</option> <option rel="Option1" value="R24">24</option> <option rel="Option1" value="R36">36</option> <option rel="Option1" value="R48">48</option> <option rel="Option1" value="R80">80</option> <!-- H --> <option rel="Option2" value="H12">12</option> <option rel="Option2" value="H24">24</option> <option rel="Option2" value="H36">36</option> <option rel="Option2" value="H48">48</option> <option rel="Option2" value="H80">80</option> <!-- L --> <option rel="Option3" value="L12">12</option> <option rel="Option3" value="L24">24</option> <option rel="Option3" value="L36">36</option> <option rel="Option3" value="L48">48</option> <option rel="Option3" value="L80">80</option> <!-- B --> <option rel="Option4" value="B12">12</option> <option rel="Option4" value="B24">24</option> <option rel="Option4" value="B36">36</option> <option rel="Option4" value="B48">48</option> <option rel="Option4" value="B80">80</option> </select> </td> </tr> <form id="formname2" name="formname2" method="post" action="submitform.asp" > <tr> <td align="right" valign="middle">Third Dropdown Menu</td> <td align="left" valign="middle"> <select disabled="disabled" id="category3" name="category3"> <option class="label" value>Please Select</option> <!-- R --> <option rel="R12" value="12v1">R12V1</option> <option rel="R24" value="R24v1">R24V1</option> <option rel="R36" value="R36v1">R36V1</option> <option rel="R48" value="R48v1">R48V1</option> <option rel="R80" value="R80v1">R80V1</option> <!-- H --> <option rel="H12" value="H12v1">H12V1</option> <option rel="H24" value="H24v1">H24V1</option> <option rel="H36" value="H36v1">H36V1</option> <option rel="H48" value="H48v1">H48V1</option> <option rel="H80" value="H80v1">H80V1</option> <!-- L --> <option rel="L12" value="L12v1">L12V1</option> <option rel="L24" value="L24v1">L24V1</option> <option rel="L36" value="L36v1">L36V1</option> <option rel="L48" value="L48v1">L48V1</option> <option rel="L80" value="L80v1">L80V1</option> <!-- B --> <option rel="B12" value="B12v1">B12V1</option> <option rel="B24" value="B24v1">B24V1</option> <option rel="B36" value="B36v1">B36V1</option> <option rel="B48" value="B48v1">B48V1</option> <option rel="B80" value="B80v1">B80V1</option> </select> </td> </tr> </table> </form>