jquery - 如何选择和取消选择选择框中的所有选项

Question

<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() {

});

Answer 1

您需要将multiple属性添加到 select 元素，然后您可以：

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

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

Answer 2

试试这个演示

必须在选择元素中添加 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");
});

Answer 3

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

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

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

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

Answer 4

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

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

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

您可以尝试使用prop和removeProp代替 attr。

Answer 5

大多数答案都已过时，这里以两种不同的方式选择和取消选择

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

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