Wie ändere ich den Code, um ihn für drei Dropdowns anzuwenden? (Jquery)

Question

Ich habe einen jquery Code, der sich entsprechend dem zuvor ausgewählten Wert von Dropdown ändert. Ich benutze es, wenn ich zwei Dropdown-Menüs habe und es funktioniert einwandfrei.

Jetzt ist das Problem, dass ich mit 3 Dropdowns arbeite und ich bin nicht in der Lage, den Code entsprechend 3 Dropdowns zu ändern (Grund, dass ich zu jquery neu ist).

Dies ist der Code:

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

habe ich nämlich zwei Drop-downs, course und semno, mit diesem Code und es funktioniert völlig in Ordnung .

Jetzt möchte ich eine weitere Dropdown-Liste hinzufügen, SUBNM, die kommt nach semno. Also, was ich genau will, ist, dass, wenn eine Person in course die betreffenden Güter in semno und unter den entsprechenden Positionen, wenn ein Wert ausgewählt ist, werden die Elemente sind auf den SUBNM entsprechend erscheinen sollte eine besondere Auswahl trifft.

Ich habe Rel und Klasse im Optionselement verwendet.

HTML-Code

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> 

Ich denke, ich werde auf dem semno Drop-down und dann Klasse auf dem SUBNM Drop-down entsprechend der semno rel rel Option benötigen .

Verzeihen Sie mir, wenn ich nicht 100% verständlich bin. Ich bin neu auf dieser Seite und ich brauche wirklich Hilfe.

Vielen Dank im Voraus!

Answer 1

Hoffe, das ist was du willst. Ich habe die gleiche Funktion für Änderungsereignis für das zweite select Menü verwendet.

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

Auch ich habe für die zweite select in change Ereignishandler der ersten select das Änderungsereignis ausgelöst.

$items.trigger("change"); 

Bitte beachten Sie diese fiddle