如何修改代碼以將其應用於三種下拉菜單？ （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之後。 所以我究竟想要的是，當一個人做出特定選擇在coursename相關的項目應出現在semno和這些相關的項目，當選擇一個值，該項目列於SUBNM相應之中。

我在選項元素中使用了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> 

我想我需要在按照該SUBNM下拉至semno的rel semno下拉一個相對選項，然後類。

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

謝謝您提前！

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); 
}); 

而且我已經在第一selectchange事件處理程序觸發第二select更改事件。

$items.trigger("change"); 

請參閱本fiddle