應用過濾器時動態更新所選選項？

Question

我有兩種形式，每種都有一個選擇字段和一些選項。第一種形式作爲第二種形式的過濾器，但當我選擇第一種形式時，第二種形式更新正常，但選定的選項仍然存在，即使它已被過濾掉。如何解決這個問題？嘗試選擇：第一個孩子的方法，但似乎並不奏效。

這是到目前爲止我的代碼（我真的，真正的新的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