带有 jquery 的 3 级依赖下拉菜单

Question

大家好，所以我在Jquery和javascript方面很陌生，我正在使用以前开发人员遗留下来的一些代码。我需要每个下拉菜单中显示的值依赖于其上方的值，并且每个选项只显示正确的值。我环顾四周，以这种方式找到了有关 2 阶段下拉菜单的信息，但此后从未添加额外的阶段。这是我在下面的代码：

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

我可以让第二个菜单正常工作，但第三个菜单总是只显示所有内容，或者根本不工作。我无法让它依赖于第二个菜单的值。有谁知道如何解决这个问题？任何帮助将不胜感激。

Answer 1

你需要改变

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

到

$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

问题是您在
$volt.find("[rel="+_rel+_rel+"]").show();中两次指定_rel。只需删除其中之一即可。

我还建议将第二个变量名称更改为_rel2，如以下示例所示：

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

希望这有帮助！ :)

Answer 3

你的代码几乎是完美的。 您只需要调整此行：

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

获得正确的值以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>