如何修改代碼以將其應用於三個下拉菜單？ （jQuery的）

Question

我有一個jQuery代碼，該代碼根據先前選擇的下拉列表值而變化。 當我有兩個下拉菜單時，我會使用它，並且它可以完美地工作。

現在的問題是我正在使用3個下拉菜單，並且無法根據3個下拉菜單修改代碼（原因是我是jquery的新手）。

這是代碼：

jQuery：

jQuery(function(){
var $cat = $('select[name=coursename]'),
    $items = $('select[name=semno]');

    $cat.change(function(){
    var $this = $(this).find(':selected'),
        rel = $this.attr('rel'),
        $set = $items.find('option.' + rel);

    if ($set.size() < 0) {
        $items.hide();
        return;
    }

    $items.show().find('option').hide();

    $set.show().first().prop('selected', true);});});

我用了兩個下拉菜單即coursename和semno，與此代碼和它完美的罰款。

現在，我想添加另一個下拉菜單， subnm ，它在semno之后。 因此，我真正想要的是，當一個人在課程名稱中進行特定選擇時，相關項目應出現在semno中，而在這些相​​關項目中，當選擇一個值時，這些項目將相應地列在subnm上 。

我在option元素中使用了rel和class。

HTML代碼

Course: 
<select name="coursename" id="coursename">
<option value="xyz" rel="xyz">XYZ</option>
<option value="abc" rel="abc">ABC</option>
</select>

Semester: 
<select name="semno" id="sem">
<option value="one" class="xyz">I</option>
<option value="two" class="xyz">II</option>
<option value="three" class="abc">III</option>
</select>

Subject: 
<select name="subnm" id="subnm">
<option value="p">p</option>
<option value="q">q</option>
<option value="r">r</option>
</select>

我想我將需要在semno下拉列表上使用rel選項，然后根據semno rel在subnm下拉列表上進行分類 。

如果我不能百分百理解，請原諒我。 我是這個網站的新手，我真的需要幫助。

先感謝您！

Answer 1

希望這就是你想要的。 我為第二個select菜單使用了相同的更改事件功能。

$items.change(function(){
  var $this = $(this).find(':selected'),
  rel = $this.attr('rel'),
  $set = $third.find('option.' + rel);

  if ($set.size() < 0) {
     $third.hide();
     return;
  }
  $third.show().find('option').hide();
  $set.show().first().prop('selected', true);
});

我也已經在first select change事件處理程序中觸發了第二select的change事件。

$items.trigger("change");

請參考這個小提琴