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上看到它

我如何添加另一个第一个选项，比如说“处理器”，该主板将取决于主板，然后其他所有选项都取决于主板。

现在是:主板--->内存、视频板。制作方法:处理器--->主板--->内存、显卡。

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) 的代码是很丑陋的。因此，或者，为了在将来添加新级别时更容易维护，将该代码移至公共(public)函数并仅传递所需的对象可能会很有趣。像这样的事情:

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 事件中调用。