[英]How can I select all options of multi-select select box on click?
This is my HTML这是我的 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">
When user click on 'Select All' button, I want all the options in the select box to be selected当用户单击“全选”按钮时,我希望选中 select 框中的所有选项
$('#select_all').click( function() {
// ?
});
try this,尝试这个,
call a method selectAll() onclick and write a function of code as follows调用方法selectAll() onclick 写一个函数代码如下
function selectAll(){
$("#id").find("option").each(function(this) {
$(this).attr('selected', 'selected');
});
}
Give selected
attribute to all options like this为所有这样的选项赋予selected
属性
$('#countries option').attr('selected', 'selected');
Usage:用法:
$('#select_all').click( function() {
$('#countries option').attr('selected', 'selected');
});
In case you are using 1.6+, better option would be to use .prop()
instead of .attr()
如果您使用的是.prop()
,更好的选择是使用.prop()
而不是.attr()
$('#select_all').click( function() {
$('#countries option').prop('selected', true);
});
If you are using JQuery 1.9+ then above answers will not work in Firefox.如果您使用的是 JQuery 1.9+,那么上述答案在 Firefox 中将不起作用。
So here is a code for latest jquery which will work in all browsers.所以这里有一个适用于所有浏览器的最新 jquery 代码。
Here is the code这是代码
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('');
}
Hope this will help you... :)希望能帮到你... :)
$('#select_all').click( function() {
$('select#countries > option').prop('selected', 'selected');
});
If you use jQuery older than 1.6:如果您使用早于 1.6 的 jQuery:
$('#select_all').click( function() {
$('select#countries > option').attr('selected', 'selected');
});
I'm able to make it in a native way @ jsfiddle.我能够以原生方式@jsfiddle 实现它。 Hope it will help.希望它会有所帮助。
Post improved answer when it work, and help others.在工作时发布改进的答案,并帮助他人。
$(function () {
$(".example").multiselect({
checkAllText : 'Select All',
uncheckAllText : 'Deselect All',
selectedText: function(numChecked, numTotal, checkedItems){
return numChecked + ' of ' + numTotal + ' checked';
},
minWidth: 325
});
$(".example").multiselect("checkAll");
});
http://jsfiddle.net/shivasakthi18/25uvnyra/ http://jsfiddle.net/shivasakthi18/25uvnyra/
if you also want to deselect all options once select all option is deselected you can try this: (Select All option's value should be 'all')如果您还想在取消选择所有选项后取消选择所有选项,您可以试试这个:(全选选项的值应该是“全部”)
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');
}
});
This one also can be another solution:这也可以是另一种解决方案:
$('#countries').multiselect('selectAll', false)
try尝试
$('#select_all').click( function() {
$('#countries option').each(function(){
$(this).attr('selected', 'selected');
});
});
this will give you more scope in the future to write things like这将使您将来有更多的空间来编写诸如
$('#select_all').click( function() {
$('#countries option').each(function(){
if($(this).attr('something') != 'omit parameter')
{
$(this).attr('selected', 'selected');
}
});
});
Basically allows for you to do a select all EU members or something if required later down the line基本上允许您选择所有欧盟成员或稍后需要的东西
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.