使用jquery動態選擇多選列表框中的所有項目

Question

我很擅長使用Javascript / Jquery，所以我感謝你的閱讀以及對可能是一個簡單問題的耐心。 這是一個多層次的問題，所以讓我解釋一下。

我有幾個數據綁定ASP列表框。 我還有幾個復選框，每個列表框一個。 我有使用Javascript連接的復選框，以便在點擊時選擇或取消選擇所有列表框項目。

我的目標是構建一個方法，將復選框及其相應的列表框傳遞給javascript方法，並選擇或取消選擇列表框中的所有內容。 我可以在C＃中非常簡單地執行此操作，但我們無法使用回發，因為頁面已經很慢且復雜。

所以這已經在Javascript中工作了（我將在下面發布我的代碼），但我遇到的問題是，當我們有一個更長的列表框（即20多個列表項）時，IE基本上會讓你看它滾動瀏覽所有這些並選擇它們。 Chrome沒有這個問題，Firefox至少要快得多，但IE瀏覽器是我們客戶使用的75％以上。

ASP：

<asp:ListBox ID="StatusListBx" runat="server" DataSourceID="StatusLds" 
    DataTextField="Status" DataValueField="StatusID"  Width="140px" Height="55px" AppendDataBoundItems="true"
    SelectionMode="Multiple"/> 
<asp:LinqDataSource ID="StatusLds" runat="server" 
    ContextTypeName="ElementDataConnector.ElementDBDataContext" 
    Select="new (StatusID, Status)" Where="StatusID < 4" TableName="Lookup_Status" >
</asp:LinqDataSource>
<br />
<asp:CheckBox id="SelectAllProjectStatusChkbx" runat="server" Text="Select All" />

C＃：

protected void Page_Load(object sender, EventArgs e)
{
    SelectAllProjectStatusChkbx.Attributes.Add("onclick", "selectDeselect(" + StatusListBx.ClientID + ",this)");
}

使用Javascript：

function selectDeselect(listbox, checkbox) {
    if (checkbox.checked) {
        var multi = document.getElementById(listbox.id);
        for (var i = 0; i < multi.options.length; i++) {
            multi.options[i].selected = true;
        }
    } else {
        var multi = document.getElementById(listbox.id);
        multi.selectedIndex = -1;
    }
}

（我為每個適用的Listbox / Checkbox組合復制了這個 - 它是一個可擴展的任務）

那么實際問題：

1. 如果我使用JQuery而不是Javascript來實現此功能，我是否能夠避免整個“滾動/選擇”效果？

2. 如果我可以避免滾動效果，我怎樣才能動態地將列表框傳遞給JQuery，而不必為每個Listbox / Checkbox組合編寫自定義方法？

感謝您閱讀並感謝您提供的任何幫助。

Answer 1

看看這篇文章：

http://www.craiglotter.co.za/2010/02/26/jquery-select-all-options-in-a-multiple-select-listbox/

jQuery：選擇多選列表框中的所有選項

$("#multipleselect option").prop("selected",true);

一個多選列表框，已經為您選擇了所有內容！

Answer 2

我手邊沒有IE來檢查你所指的滾動效果，但它應該很容易讓你測試。 你可以保留你的selectDeselect函數，但它可能會改變為這樣的東西（假設jQuery~1.7.2+）：

function selectDeselect(listbox, checkbox) {
    var select_all = $(checkbox).prop('checked') ? true : false;
    var select = $(listbox);
    $('option', select).prop('selected', select_all);
}

我希望非jQuery代碼更快，但是給它一個...

編輯：以上在IE中也很慢。

我不是這種方法的粉絲，但您可以嘗試替換選擇下拉列表中的實際HTML。 就像是：

function selectDeselect(listbox, checkbox) {
    var select_all = $(checkbox).prop('checked') ? true : false;        
    var select = $(listbox);    
    if (select_all) {
        var clone = select.clone();
        $('option', clone).attr('selected', select_all);
        var html = clone.html();
        select.html(html);
    }
    else $('option', select).removeAttr('selected');    
}

它似乎適用於IE9： jsfiddle