将选择的属性添加到多个选择列表 [英] Add attribute selected to multiple select lists

问题描述

我有一个页面，其中包含多个具有相同班级的选择列表. 一个选择列表具有与其他列表相同的值和选项.

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

我将非常感谢您的帮助

解决方案

您可以为selectAll select创建更改处理程序.获取当前选择的值，并使用.val()设置为其余值:

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

使用.val()

的工作演示

您还可以设置通过设置属性selected选择的选项:

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

使用.prop('selected'，true)

的工作演示>

I have a page with multiple select lists with the same class. And one select list with the same value's and options as the other lists.

I would like to change all the selected value's of the lists with the same class by selecting a option in the list with a unique ID.

I'll include a sample HTML code

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

So i would like if someone for example selects Audi in the selectall class that it dynamically changes the selected value in all the single classes to Audi too

I would really appreciate any help

解决方案

You can create a change handler for selectAll select. get the current selected value and set the same for rest using .val():

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

Working Demo using .val()

You can also set option selected by setting property selected :

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

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

这篇关于将选择的属性添加到多个选择列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！