<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
属性添加到select元素,然后您可以:
$('#selectall').click(function() {
$('select#studentremain option').attr("selected","selected");
});
$('#deselectall').click(function() {
$('select#studentremain option').removeAttr("selected");
});
试试这个demo
必须在select元素中添加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");
});
首先将多个属性添加到您的选择框,以便您可以选择多个值,然后这样就可以了,因为您正在使用jQuery。
//for selection of all.
$('#studentremain option').attr('selected','selected');
//for removal of selection.
$('#studentremain option').removeAttr('selected');
您可以在attr处尝试prop和removeProp。
不知怎的,上面的答案对我不起作用。似乎您必须使用属性而不是属性。这是代码:
$('#selectall').click(function() {
$('select#studentremain option').prop("selected",true);
});
$('#deselectall').click(function() {
$('select#studentremain option').prop("selected",false);
});
文档说selected
属性仅指定在页面加载时应预先选择option
。但是当用户选择了实际的option
时未设置。 Source