将所选属性添加到多个选择列表

Question

我有一个页面，其中包含多个具有相同类别的选择列表。 并且一个选择列表具有与其他列表相同的值和选项。

我想通过在列表中选择具有唯一ID的选项来更改具有相同类别的列表的所有选定值。

我将包含示例HTML代码

 <select id="selectall">
 <option value="volvo">Volvo</option>
 <option value="saab">Saab</option>
 <option value="mercedes">Mercedes</option>
 <option value="audi">Audi</option>
 </select> 

<select class="single">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select> 

<select class="single">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select> 

<select class="single">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select> 

所以我想如果有人在selectall类中选择奥迪，它会动态地将所有单个类中的选定值更改为奥迪

我真的很感激任何帮助

Answer 1

您可以收听change元素的#selectall事件，然后使用属性选择器根据所选值选择其他option元素：

Example Here

$('#selectall').on('change', function () {
    $('select.single option[value="' + this.value + '"]').prop('selected', true);
});

---

您也可以只更改每个元素的值：

Example Here

$('#selectall').on('change', function () {
    $('select.single').val(this.value);
});

---

但是，您应该使用第一种方法，因为select.single元素可能与#selectall元素的值不同。请参阅this example演示问题。

Answer 2

您可以为selectAll select创建更改处理程序。获取当前选定的值并使用.val()设置相同的休息时间：

 $('#selectall').change(function(){
   $('select.single').val($(this).val());
 });

Working Demo using .val()

您还可以通过设置属性selected来设置选项：

$('#selectall').change( function () {
   $("select.single option[value='" + this.value + "']").prop('selected', true);
});

Working Demo using .prop('selected',true)

Answer 3

＆＃13;

＆＃13;

$('#selectall').on('change',function(){
    $('.single').val($(this).val());  
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="selectall">
 <option value="volvo">Volvo</option>
 <option value="saab">Saab</option>
 <option value="mercedes">Mercedes</option>
 <option value="audi">Audi</option>
 </select> 

<select class="single">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select> 

<select class="single">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select> 

<select class="single">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>

＆＃13;

＆＃13;

＆＃13;