jQuery 如何将所有选项设置为从多个选择框中选择
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14683884/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to set all options to selected from multiple select boxes
提问by Neriyan
I have a jsp form in which the user is presented with multiple select boxes from which they can choose multiple options:
我有一个 jsp 表单，其中向用户显示多个选择框，他们可以从中选择多个选项：
<td rowspan="4" colspan="1">Team Leaders<br />
<form:select id="teamLeader" multiple="multiple" size="10" path="teamLeader"/>
</td>
<td rowspan="4" colspan="1">HODs<br />
<form:select id="teamHod" multiple="multiple" size="10" path="teamHod"/>
</td>
<td rowspan="4" colspan="1">Directors<br />
<form:select id="teamDir" multiple="multiple" size="10" path="teamDir"/>
</td>
<td rowspan="4" colspan="1">Members<br />
<form:select id="teamPersons" multiple="multiple" size="10" path="teamPersons"/>
</td>
When the user clicks save, I want all options from all select boxes to be set to selected. I can achieve this by using a little jQuery method for each select box as follows:
当用户单击保存时，我希望将所有选择框中的所有选项都设置为选中状态。我可以通过为每个选择框使用一个小的 jQuery 方法来实现这一点，如下所示：
jQuery(document).ready(function () {
jQuery('#saveButton').click(function () {
jQuery('#teamPersons').each(function () {
jQuery('#teamPersons option').attr("selected", "selected");
});
});
});
However the problem is that I have to write a method for each of the 4 select boxes. Is there an easier way to do this i.e. write a single jQuery method to set all options to selected?
但是问题是我必须为 4 个选择框中的每一个编写一个方法。有没有更简单的方法来做到这一点，即编写一个 jQuery 方法来将所有选项设置为选中？
回答by SpaceBison
The simplest way to select every single item on click, would be as follows:
单击时选择每个项目的最简单方法如下：
$("select[multiple] option").prop("selected", "selected");
$("select[multiple] option").prop("selected", "selected");
Example fiddle: http://jsfiddle.net/vYzUS/
小提琴示例：http: //jsfiddle.net/vYzUS/
In the fiddle, I've omitted the button click and turned the HTML into dummy HTML. I've also (arbitrarily) added the multiple attribute, incase you have any other selectlists that you do notwant to be selected. It mightbe more advisable to wrap the ones you do want to select in a divwith an id, as it will give the selector a better focus.
在小提琴中，我省略了按钮单击并将 HTML 转换为虚拟 HTML。我也（任意）的添加多个属性，柜面你有任何其他的select名单，你不希望被选中。这可能是更明智。包你想在一个选择那些div有id，因为它会给选择一个更好的焦点。
I've also used .prop()instead of .attr()- .prop()was introduced in jQuery 1.7and is specifically for retrieval/setting of property values.
我还使用了 jQuery 1.7中引入的.prop()代替.attr()-并且专门用于检索/设置属性值。.prop()
回答by AlecTMH
You don't need to write a function for each select box, just this code:
您不需要为每个选择框编写函数，只需以下代码：
jQuery(document).ready(function() {
jQuery('#saveButton').click(function() {
jQuery('select.myClass option').attr("selected","selected");
});
});
HTML with classes
带类的 HTML
<td rowspan="4" colspan="1">Team Leaders<br />
<form:select id="teamLeader" class="myClass" multiple="multiple" size="10" path="teamLeader"/>
</td>
<td rowspan="4" colspan="1">HODs<br />
<form:select id="teamHod" class="myClass" multiple="multiple" size="10" path="teamHod"/>
</td>
<td rowspan="4" colspan="1">Directors<br />
<form:select id="teamDir" class="myClass" multiple="multiple" size="10" path="teamDir"/>
</td>
<td rowspan="4" colspan="1">Members<br />
<form:select id="teamPersons" class="myClass" multiple="multiple" size="10" path="teamPersons"/>
</td>
so only select boxes with class myClass will be switched on click.
所以只有选择类为 myClass 的框才会在点击时切换。
回答by Ravi Gadag
This will do the trick. As jQuery will implicitly use loops via the selectors. If you want to make it explicit as loop, then use your method (IMO that is not necessary).
这将解决问题。因为 jQuery 将通过选择器隐式使用循环。如果您想将其明确表示为循环，请使用您的方法（IMO 不是必需的）。
You can do like this.
你可以这样做。
$("#teamPersons option").attr("selected", "selected");
回答by RegarBoy
You can select them all in this way:
您可以通过以下方式全部选择它们：
$("select option").prop("selected", "selected");
or
或者
$("select option").attr("selected", "selected");
And you can remove all selected options by:
您可以通过以下方式删除所有选定的选项：
$("select option").prop("selected", false);
or
或者
$("select option").attr("selected", false);
or
或者
$("select option").attr("selected", "");
