更改動態創建的下拉列表的值

Question

我有一個在我的服務器端代碼中動態創建的下拉元素列表。

<select id="color1"> 
<option value="blue">blue</option> 
<option value="red">red</option> 
<option value="green">green</option> 
</select> 
<select id="color2"> 
<option value="white">white</option> 
<option value="orange">orange</option> 
<option value="green">green</option> 
</select> 
<select id="color3"> 
<option value="black">black</option> 
<option value="pink">pink</option> 
<option value="brown">brown</option> 
</select> 
<select id="color4"> 
<option value="yellow">yellow</option> 
<option value="black">black</option> 
<option value="green">green</option> 
</select> 

我需要在jQuery來編寫代碼來改變基於選擇要素之一的選擇按鈕點擊所有的SELECT值的值。

例如：如果我在第一個SELECT中選擇紅色，則所有SELECT元素值應該更改爲紅色。如果該值已經存在於目標SELECT中，我們只需要選擇該值，否則我們需要追加它。

是否有可能在jQuery中編寫它？

Answer 1

$selected = $('#color1 option:selected'); 
val = $selected.attr('value'); 
$('select:not(#color1)').each(function(i) { 
    $opt = $('option[value='+val+']', $(this)); 
    if(!$opt.length) { 
     $(this).append($selected).attr('selected', 'selected'); 
    } else { 
     $opt.attr('selected', 'selected'); 
    } 
}); 

雖然沒有測試過。希望這是一個很好的基礎。不要忘記將其附加到#color1的select事件處理程序或您所選按鈕的click處理程序中。