我怎樣才能 select 多選 select 點擊框的所有選項？

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 框中的所有選項

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

---

更新

如果您使用的是.prop() ，更好的選擇是使用.prop()而不是.attr()

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

Answer 5

如果您使用的是 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 6

工作演示

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

如果您使用早於 1.6 的 jQuery：

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

Answer 7

我能夠以原生方式@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/

Answer 8

如果您還想在取消選擇所有選項后取消選擇所有選項，您可以試試這個：（全選選項的值應該是“全部”）

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

Answer 9

這也可以是另一種解決方案：

$('#countries').multiselect('selectAll', false)

Answer 10

嘗試

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

基本上允許您選擇所有歐盟成員或稍后需要的東西