更改动态创建的下拉列表的值

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处理程序中。