[英]How can I select all options of multi-select select box on click?
这是我的 HTML
<select name="countries" id="countries" MULTIPLE size="8">
<option value="UK">UK</option>
<option value="US">US</option>
<option value="Canada">Canada</option>
<option value="France">France</option>
<option value="India">India</option>
<option value="China">China</option>
</select>
<br />
<input type="button" id="select_all" name="select_all" value="Select All">
当用户单击“全选”按钮时,我希望选中 select 框中的所有选项
$('#select_all').click( function() {
// ?
});
尝试这个:
$('#select_all').click(function() {
$('#countries option').prop('selected', true);
});
这是一个现场演示。
对于 jQuery 版本 1.6+ 然后
$('#select_all').click( function() {
$('#countries option').prop('selected', true);
});
或者对于旧版本:
$('#select_all').click( function() {
$('#countries option').attr('selected', 'selected');
});
尝试这个,
调用方法selectAll() onclick 写一个函数代码如下
function selectAll(){
$("#id").find("option").each(function(this) {
$(this).attr('selected', 'selected');
});
}
为所有这样的选项赋予selected
属性
$('#countries option').attr('selected', 'selected');
用法:
$('#select_all').click( function() {
$('#countries option').attr('selected', 'selected');
});
如果您使用的是.prop()
,更好的选择是使用.prop()
而不是.attr()
$('#select_all').click( function() {
$('#countries option').prop('selected', true);
});
如果您使用的是 JQuery 1.9+,那么上述答案在 Firefox 中将不起作用。
所以这里有一个适用于所有浏览器的最新 jquery 代码。
观看现场演示
这是代码
var select_ids = [];
$(document).ready(function(e) {
$('select#myselect option').each(function(index, element) {
select_ids.push($(this).val());
})
});
function selectAll()
{
$('select#myselect').val(select_ids);
}
function deSelectAll()
{
$('select#myselect').val('');
}
希望能帮到你... :)
$('#select_all').click( function() {
$('select#countries > option').prop('selected', 'selected');
});
如果您使用早于 1.6 的 jQuery:
$('#select_all').click( function() {
$('select#countries > option').attr('selected', 'selected');
});
我能够以原生方式@jsfiddle 实现它。 希望它会有所帮助。
在工作时发布改进的答案,并帮助他人。
$(function () {
$(".example").multiselect({
checkAllText : 'Select All',
uncheckAllText : 'Deselect All',
selectedText: function(numChecked, numTotal, checkedItems){
return numChecked + ' of ' + numTotal + ' checked';
},
minWidth: 325
});
$(".example").multiselect("checkAll");
});
如果您还想在取消选择所有选项后取消选择所有选项,您可以试试这个:(全选选项的值应该是“全部”)
var selectAllIsSelected = false;
$('#select').on('change', function(event) {
var vals = $(this).val()
if (selectAllIsSelected == false && vals.indexOf("all")>-1 == true) {
$('.service_continent > option').prop('selected', true);
selectAllIsSelected = true;
$('.service_continent').trigger('change');
}
if(selectAllIsSelected == true && vals.indexOf("all")>-1 == false)
{
$('.service_continent > option').prop('selected', false);
selectAllIsSelected = false;
$('.service_continent').trigger('change');
}
});
这也可以是另一种解决方案:
$('#countries').multiselect('selectAll', false)
尝试
$('#select_all').click( function() {
$('#countries option').each(function(){
$(this).attr('selected', 'selected');
});
});
这将使您将来有更多的空间来编写诸如
$('#select_all').click( function() {
$('#countries option').each(function(){
if($(this).attr('something') != 'omit parameter')
{
$(this).attr('selected', 'selected');
}
});
});
基本上允许您选择所有欧盟成员或稍后需要的东西
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.