3つのドロップダウンに適用するコードを変更するにはどうすればよいですか？ （Jquery）

Question

私は以前に選択したドロップダウンの値に従って変更されるjqueryコードを持っています。 2つのドロップダウンがあり、完璧に機能しているときに使用します。

問題は、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);});}); 

私はこのコードで、2つのドロップダウンすなわち、coursenameとsemnoを使用し、それは完全に正常に動作します。

サブームは、セムノの後に追加します。 は、だから私は正確に何をしたい人はcoursenameで特定の選択を行う際関連する項目が semnoと値が選択されている場合、アイテムはそれに応じてsubnmに上場されているものを、関連する項目のうち、に表示されるべきであるということです。

私はrelとclassをoption要素に使用しました。

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> 

私は REL semno に応じて、subnmドロップダウン上の相対 semnoドロップダウンのオプションとそのクラスが必要になります推測。

私が100％理解できない場合、私を許してください。私はこのサイトを初めて利用しており、本当に助けが必要です。

ありがとうございます！

Answer 1

希望はこれです。私は2番目の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); 
}); 

また、私は最初selectのchangeイベントハンドラで二selectための変更イベントをトリガしています。

$items.trigger("change"); 

このfiddle