如何选择和取消选择选择框中的所有选项答案

【问题标题】：how to select and deselect all options in a select box如何选择和取消选择选择框中的所有选项
【发布时间】：2013-01-10 14:42:14
【问题描述】：

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

上面有一个选择框，选择全部和取消选择上面的所有按钮。我的问题是通过使用jquery，当点击相关按钮时，如何让按钮选择所有选项并取消选择上面选择框中的所有选项？

下面我只有两个按钮的点击处理程序：

$('#selectall').click(function() {

});   

$('#deselectall').click(function() {

});

【问题讨论】：

除非您添加 multiple 属性，否则您无法选择该元素中的所有选项。

标签： jquery html

【解决方案1】：

你需要给select元素加上multiple属性，然后你可以：

$('#selectall').click(function() {
    $('select#studentremain option').attr("selected","selected");
});   

$('#deselectall').click(function() {
    $('select#studentremain option').removeAttr("selected");
});

【讨论】：

@user1881090 我不确定，因为 JSFiddle 最近在 Chrome 中不适合我（v 23.0.1271.97），我只是收到大量控制台错误（即 Uncaught TypeError: Object #
@TonyDay 没关系，这要归功于之前有人在 SO 中发布的关于相同问题的问题，取消选择这样做，它将取消突出显示 chrome 中的所有选项（也适用于其他浏览器）@987654324 @
@TonyDay：选择和取消选择只发生一次，之后完全没有变化，为什么会这样？
@dreamweiver 检查您的 JavaScript 是否有错误。这通常是事件不再起作用的原因。通过在您的代码中添加一些警报进行验证，以确保已到达。
@dreamweiver。我有和你一样的问题，用.prop 解决。我知道它已经晚了 5 年，但我希望该链接可以帮助将来的人。

【解决方案2】：

试试这个demo

必须在选择元素中添加multiple="multiple"

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：

$('#selectall').click(function() {
    $('#studentremain > option').attr("selected", "selected");
});   

$('#deselectall').click(function() {
    $('#studentremain > option').removeAttr("selected");
});

【讨论】：

【解决方案3】：

不知何故，上面的答案对我不起作用。似乎您必须使用属性而不是属性。代码如下：

$('#selectall').click(function() {
    $('select#studentremain option').prop("selected",true);
});   

$('#deselectall').click(function() {
    $('select#studentremain option').prop("selected",false);
});

文档说selected 属性仅指定在页面加载时应预先选择option。但在用户选择实际option 时不设置。 Source

【讨论】：

【解决方案4】：

首先将 multiple 属性添加到您的选择框，这样您就可以选择多个值，然后这样就足够了，因为您使用的是 jQuery。

//for selection of all.
$('#studentremain option').attr('selected','selected');

//for removal of selection.
$('#studentremain option').removeAttr('selected');

你可以试试prop和removeProp代替attr。

【讨论】：

【解决方案5】：

大部分答案都已过时，这里选择和取消选择有两种不同的方式

$('#selectall').click(function() {
    $("#studentremain option").prop("selected", true);
});   

$('#deselectall').click(function() {
    $("#studentremain option").val([]);
});

【讨论】：