Question

这是我的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_all').click( function() {
    // ?
});

Answer 1

试试这个：

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

这是一个live demo。

Answer 2

对于jQuery版本1.6+然后

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

或旧版本：

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

LIVE DEMO

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+，更好的选择是使用.prop()代替.attr()

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

Answer 5

<强> Working Demo

$('#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的代码，可以在所有浏览器中使用。

请参阅live demo

这是代码

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

基本上允许您选择所有欧盟成员或某些事情（如果稍后需要的话）

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/

单击时，JQuery选择多选选择框的所有选项

8 个答案:

更新