JavaScript jQuery依赖下拉列表

Question

我有这个依赖的下拉框代码，在其中选择第一个选择（主板），而其他选择（内存和视频面板）则取决于第一个选择。

 $(function(){ var $cat = $("#motherboard"), $subcat = $(".subcat"); $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 option{ display:none; } .subcat option.label{ display:block; } /* useless template */ div{ margin-bottom:10px; float:left; width:100%; } label{ float:left; width:200px; margin-left:20px } p{ padding:5px 20px; background-color:#f1f1f1; float:left; border:solid 1px #ccc; color:#333; text-transform:uppercase; margin: 20px 0 30px; } body{ font-family:arial; font-size:14px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <h1>Made your PC:</h1> <div> <label>Select motherboard: </label><select id="motherboard" name="motherboard"> <option class="label" value>Select Motherboard</option> <!-- Home Ware --> <option value="AS1">ASUS RAMPAGE V EXTREME</option> <option value="AS2">ASUS ATX DDR3 2600 LGA</option> <option value="GB1">Gigabyte AM3+</option> <option value="MSI1">MSI ATX DDR3 2600 LGA 1150</option> </select> </div> <p><strong>Only compatible components will show.</strong></p> <div> <label>Select RAM: </label> <select disabled="disabled" class="subcat" id="RAM" name="RAM"> <option class="label" value>RAM Memory</option> <option rel="AS1 AS2 GB1" value="KI1">Kingston Value RAM</option> <option rel="AS1 AS2 MSI1" value="P5KPL">P5KPL-AM SE</option> <option rel="MSI1 GB1" value="960GM">960GM-VGS3 FX </option> </select> </div> <div> <label>Select Video Board: </label> <select disabled="disabled" class="subcat" id="video-card" name="video-card"> <option class="label" value>Video Card</option> <option rel="MSI1 AS2" value="EVGA8400">EVGA GeForce 8400 GS</option> <option rel="AS1" value="XFXAMD">XFX AMD Radeon HD 5450</option> <option rel="MSI1 GB1" value="GTX750Ti">EVGA GeForce GTX 750Ti SC</option> </select> </div> 

您也可以在此jsfiddle上看到它

我该如何添加主板要依赖的另一个第一个选项（例如“处理器”），然后其他一切都取决于主板。

现在它是：Motherboad ---> ram，视频板。 制作方法：处理器--->主板--->内存，视频板。

Answer 1

您可以通过以下方法实现此目的：

• 为处理器下拉菜单添加新部分
• 在主板上添加一个rel属性，其中将包含处理器ID
• 表示主板现在是子类别（通过添加class="subcat" ）
• 复制主板的onchange代码，但将其应用于处理器并定位到主板而不是子类别

代码如下：

 $(function(){ // add a supercategory for the processor var $supcat = $("#processor"), $cat = $("#motherboard"), $subcat = $(".subcat"); // duplicate the code for the processor -> motherboard $supcat.on("change",function(){ var _rel = $(this).val(); $cat.find("option").attr("style",""); $cat.val(""); if(!_rel) return $cat.prop("disabled",true); $cat.find("[rel~='"+_rel+"']").show(); $cat.prop("disabled",false); }); $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 option{ display:none; } .subcat option.label{ display:block; } /* useless template */ div{ margin-bottom:10px; float:left; width:100%; } label{ float:left; width:200px; margin-left:20px } p{ padding:5px 20px; background-color:#f1f1f1; float:left; border:solid 1px #ccc; color:#333; text-transform:uppercase; margin: 20px 0 30px; } body{ font-family:arial; font-size:14px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <h1>Made your PC:</h1> <div> <label>Processeor: </label><select id="processor" name="processor"> <option class="label" value>Select Processor</option> <!-- Home Ware --> <option value="P1">Processor 1</option> <option value="P2">Processor 2</option> <option value="P3">Processor 3</option> <option value="P4">Processor 4</option> </select> </div> <p><strong>Only compatible components will show.</strong></p> <div> <label>Select motherboard: </label><select id="motherboard" name="motherboard" class="subcat" disabled="disabled"> <option class="label" value>Select Motherboard</option> <!-- Home Ware --> <option rel="P1 P2" value="AS1">ASUS RAMPAGE V EXTREME</option> <option rel="P2 P3" value="AS2">ASUS ATX DDR3 2600 LGA</option> <option rel="P1 P3 P4" value="GB1">Gigabyte AM3+</option> <option rel="P2 P4" value="MSI1">MSI ATX DDR3 2600 LGA 1150</option> </select> </div> <div> <label>Select RAM: </label> <select disabled="disabled" class="subcat" id="RAM" name="RAM"> <option class="label" value>RAM Memory</option> <option rel="AS1 AS2 GB1" value="KI1">Kingston Value RAM</option> <option rel="AS1 AS2 MSI1" value="P5KPL">P5KPL-AM SE</option> <option rel="MSI1 GB1" value="960GM">960GM-VGS3 FX </option> </select> </div> <div> <label>Select Video Board: </label> <select disabled="disabled" class="subcat" id="video-card" name="video-card"> <option class="label" value>Video Card</option> <option rel="MSI1 AS2" value="EVGA8400">EVGA GeForce 8400 GS</option> <option rel="AS1" value="XFXAMD">XFX AMD Radeon HD 5450</option> <option rel="MSI1 GB1" value="GTX750Ti">EVGA GeForce GTX 750Ti SC</option> </select> </div> 

---

复制适用于处理器（ $supcat ）和主板（ $cat ）的代码很丑陋。 因此，或者为了使将来添加新级别时更易于维护，将代码移动到通用函数中并仅传递所需的对象可能会很有趣。 像这样：

function updateSelects(obj1, obj2) {
    var _rel = $(obj1).val();
    obj2.find("option").attr("style","");
    obj2.val("");
    if(!_rel) return obj2.prop("disabled",true);
    obj2.find("[rel~='"+_rel+"']").show();
    obj2.prop("disabled",false);
}

那将被称为onchange事件。