jQuery 如何选择和取消选择选择框中的所有选项
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14260428/
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 select and deselect all options in a select box
提问by user1881090
<select name="remaintextarea" id="studentremain" size="10">
<option value="one">One</option>
<option value="two">Two</option>
<option value="three">Three</option>
</select>
<button type='button' id='selectall'>Select All</button>
<button type='button' id='deselectall'>De-Select All</button>
Got a select box above, select all and de-select all buttons above. My question is by using jquery, how can I get the button to select all the options and deselect all the options in the select box above when the relevant buttons are clicked on?
上面有一个选择框，全选并取消选择上面的所有按钮。我的问题是通过使用jquery，当点击相关按钮时，如何让按钮选择所有选项并取消选择上面选择框中的所有选项？
Below I just have the click handlers for both buttons:
下面我只有两个按钮的点击处理程序：
$('#selectall').click(function() {
});
$('#deselectall').click(function() {
});
回答by Tony Day
You need to add the multipleattribute to the select element, and then you can:
需要multiple在select元素中添加属性，然后可以：
$('#selectall').click(function() {
$('select#studentremain option').attr("selected","selected");
});
$('#deselectall').click(function() {
$('select#studentremain option').removeAttr("selected");
});
回答by phnkha
Try this demo
试试这个演示
Must add multiple="multiple" in select element
必须在 select 元素中添加 multiple="multiple"
HTML:
HTML：
<select multiple="multiple" name="remaintextarea" id="studentremain" size="10">
<option value="one">One</option>
<option value="two">Two</option>
<option value="three">Three</option>
</select>
<button type='button' id='selectall'>Select All</button>
<button type='button' id='deselectall'>De-Select All</button>
JS:
JS：
$('#selectall').click(function() {
$('#studentremain > option').attr("selected", "selected");
});
$('#deselectall').click(function() {
$('#studentremain > option').removeAttr("selected");
});
回答by gtu
Somehow the answers above did not work for me. Seems that you have to use properties instead of attributes. Here is the code:
不知何故，上面的答案对我不起作用。似乎您必须使用属性而不是属性。这是代码：
$('#selectall').click(function() {
$('select#studentremain option').prop("selected",true);
});
$('#deselectall').click(function() {
$('select#studentremain option').prop("selected",false);
});
Documentation says that selectedattribute only specifies that an optionshould be pre-selected when the page loads. But is not set when the actual optionis selected by the user.
Source
文档说该selected属性仅指定option在页面加载时应预先选择 。但当option用户选择实际时不设置。
来源
回答by Jonathan Schroeder
Add the multipleattribute to your select box first so that you can have multiple values selected and then something like this would be sufficient since you're using jQuery.
首先将multiple属性添加到您的选择框，以便您可以选择多个值，然后这样的事情就足够了，因为您使用的是 jQuery。
//for selection of all.
$('#studentremain option').attr('selected','selected');
//for removal of selection.
$('#studentremain option').removeAttr('selected');
You can try propand removePropin the place of attr.
你可以试试prop和removeProp来代替 attr。
回答by Sobin Augustine
Most of the answer were outdated, Here selecting and deselecting in two different ways
大部分答案已经过时，这里选择和取消选择两种不同的方式
$('#selectall').click(function() {
$("#studentremain option").prop("selected", true);
});
$('#deselectall').click(function() {
$("#studentremain option").val([]);
});
