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

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值的值。

对于Eg：如果我在第一个SELECT中选择红色，则所有SELECT元素值都应更改为红色。如果目标SELECTs中已经存在该值，我们只需要选择该值，否则我们需要追加它。

是否可以在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');
   }
});

但是，没有测试过。希望它是一个很好的基础。不要忘记将其附加到select的{​​{1}}事件处理程序或您选择的按钮的#color1处理程序。