javascript - 使用 jquery 动态选择多选列表框中的所有项目

Question

我对使用 Javascript/Jquery 还很陌生，所以我感谢你的阅读以及你对这可能是一个简单问题的耐心等待。这是一个多层次的问题，所以让我解释一下。

我有几个数据绑定(bind) 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;
    }
}

(我已经为每个适用的列表框/复选框组合复制了这个 - 这是一个可扩展的任务)

所以对于实际问题:

1. 如果我使用 JQuery 而不是 Javascript 来实现此功能，我是否能够避免整个“滚动/选择”效果？

2. 如果我可以避免这种滚动效果，我如何才能将列表框动态传递给 JQuery，而不必为每个列表框/复选框组合编写自定义方法？

感谢您阅读并感谢您提供的任何帮助。

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

一个多选列表框，所有内容都已为您选择!