将选定的属性添加到多个选择列表答案

【问题标题】：Add attribute selected to multiple select lists将选定的属性添加到多个选择列表
【发布时间】：2015-03-11 23:48:44
【问题描述】：

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

我想通过选择具有唯一 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 类中选择奥迪，它也会动态地将所有单个类中的选定值更改为奥迪

非常感谢任何帮助

【问题讨论】：

您忘记发布您尝试过的 jQuery。

标签： jquery

【解决方案1】：

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

<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>

【讨论】：

【解决方案2】：

您可以监听#selectall 元素的change 事件，然后使用属性选择器根据所选值选择其他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 演示问题。

【讨论】：

OP 已经发布了标记和值是相同的。你为什么说价值观可能不同？
@MilindAnantwar 我说值可能不同是可能。这有什么难理解的？你应该进行防御性编程。既然你在这里，为什么你必须通过在我之后发布相同的东西来复制我的答案？
哦，真的......你开始了这个游戏。你在我发布后发布了第二部分。如果你没记错的话......

【解决方案3】：

您可以为 selectAll 选择创建更改处理程序。使用.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)

【讨论】：

@67Stefano：很高兴它有帮助:)