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

Question

我对使用Javascript/Jquery非常陌生，所以我很感谢您阅读和耐心解决一个简单的问题。这是一个多层次的问题，所以让我解释一下。

我有几个数据绑定ASP列表框。我也有几个复选框，每个列表框一个。我选中或取消选中所有Listbox项目，并使用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，而不必为每个Listbox/Checkbox组合编写自定义方法？

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

Answer 1

我手边没有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

Answer 2

看看这个帖子：

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

jQuery的：在多个选择列表框选择所有选项

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

带有everythin的多选列表框g已经为你选定！