Die ausgewählte Option dynamisch aktualisieren, wenn der Filter angewendet wird?

Question

Ich habe zwei Formen, jedes mit einem Auswahlfeld und einigen Optionen. Das erste Formular funktioniert als Filter für das zweite, aber wenn ich etwas im ersten Formular auswähle, wird das zweite Formular zwar aktualisiert, aber die ausgewählte Option bleibt bestehen, obwohl sie herausgefiltert wurde. Wie kann ich das beheben? Versucht mit der Option: First-Child-Ansatz, aber es scheint nicht zu funktionieren. so weit

Dies ist mein Code (ich bin wirklich, wirklich neu zu jQuery)

<form action="select.php" method="post"> 
    <select name="color" id="color"> 
     <option value="blue">Blue</option> 
     <option value="red">Red</option> 
     <option value="purple">Purple</option> 
     <option value="orange">Orange</option> 
    </select> 
</form> 

<form action="select.php" method="post">  
    <select name="character" id="character"> 
     <option value="leo" class="blue">Leo</option> 
     <option value="smurf" class="blue">Smurf</option> 
     <option value="thedevil" class="red">The Devil</option> 
     <option value="raphael" class="red">Raphael</option> 
     <option value="donnatello" class="purple">Donnatello</option> 
     <option value="mike" class="orange">Mike</option> 
    </select> 
</form> 

<script> 
    $('#color').change(function() { 
     var myColor = $('#color option:selected').val(); 
     $('#character option').hide(); 
     $('#character option').filter("." + myColor).show(); 
     $('#character option:first-child').attr("selected", "selected"); 
    });  
</script> 

Answer 1

benötigen Sie den Wert des #character bis auf den ersten option auszuwählen, die den Filter übereinstimmt, nicht das erste Kind innerhalb der Auswahl, da sich diese niemals ändert. Versuchen Sie folgendes:

$('#color').change(function() { 
    var myColor = $('#color').val(); 
    $('#character option').hide().filter("." + myColor).show().first().prop("selected", true); 
}).change(); 

Working example