フィルタを適用したときに、選択したオプションを動的に更新しますか？

Question

私には2つのフォームがあり、それぞれ選択フィールドといくつかのオプションがあります。最初のフォームは2番目のフォームのフィルタとして機能しますが、最初のフォームで何かを選択すると、2番目のフォームは正常に更新されますが、選択されたオプションはフィルタリングされても残ります。私はこれをどのように修正するのですか？オプションで試してみる：最初の子供のアプローチが、動作していないようです。

これは、これまでの私のコードです（私は、本当に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

あなたは#characterの値を設定する必要がフィルタに一致する最初のoptionに選択し、ない最初のそれが決して変化しないような選択内の子供。

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

Working example