JQuery在点击时select多select框的所有选项

这是我的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"> 

当用户点击“全选”button时，我希望select框中的所有选项

 $('#select_all').click( function() { // ? }); 

Answer 1

尝试这个：

 $('#select_all').click(function() { $('#countries option').prop('selected', true); }); 

这里是一个现场演示 。

Answer 2

对于jQuery版本1.6+然后

 $('#select_all').click( function() { $('#countries option').prop('selected', true); }); 

或者对于旧版本：

 $('#select_all').click( function() { $('#countries option').attr('selected', 'selected'); }); 

现场演示

Answer 3

尝试这个，

调用方法selectAll（）onclick并编写如下的代码函数

 function selectAll(){ $("#id").find("option").each(function(this) { $(this).attr('selected', 'selected'); }); } 

Answer 4

给selected属性，像这样的所有选项

 $('#countries option').attr('selected', 'selected'); 

用法：

 $('#select_all').click( function() { $('#countries option').attr('selected', 'selected'); }); 

---

更新

如果你使用1.6+，更好的select是使用.prop()而不是.attr()

 $('#select_all').click( function() { $('#countries option').prop('selected', true); }); 

Answer 5

工作演示

 $('#select_all').click( function() { $('select#countries > option').prop('selected', 'selected'); }); 

如果你使用1.6以上的jQuery：

 $('#select_all').click( function() { $('select#countries > option').attr('selected', 'selected'); }); 

Answer 6

如果你使用的是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(''); } 

希望对你有帮助… ：）

Answer 7

尝试

 $('#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'); } }); }); 

基本上允许你做一个select所有欧盟成员或事后如果需要的话

Answer 8

我能够以本地方式@ 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"); }); 

http://jsfiddle.net/shivasakthi18/25uvnyra/