动态地选择在多选列表框使用jQuery的所有项目 [英] Dynamically select all items in a Multi-Select listbox using jquery

问题描述

我很新的使用Javascript / jQuery的，所以我AP preciate你阅读和什么可能是一个简单的问题，你的耐心。这是一个有点多层次的问题，所以让我解释一下。

I'm very new to using Javascript/Jquery, so I appreciate you reading and your patience with what is likely a simple problem. This is a bit of a multi-tiered question, so let me explain.

我有几个数据绑定的ASP列表框。我也有几个复选框，每个列表框。我有有线复选框，使用Javascript，选择或取消选择上点击列表框的所有项目。

I have several databound ASP listboxes. I also have several checkboxes, one for each listbox. I have the checkboxes wired, using Javascript, to select or deselect all the Listbox items on click.

我的目标是构建将通过复选框及其对应的列表框中的JavaScript方法，并在列表框中选择或取消选择所有的单一方法。我能做到这一点非常简单地在C＃中，但我们不能使用回传，作为网页已经是缓慢而复杂的。

My goal was to construct a single method that will pass the checkbox and its corresponding listbox to the javascript method and either select or unselect everything in the listbox. I could do this very simply in C#, but we can't use a postback, as the page is already slow and complex.

因此​​，这已经是JavaScript的工作（我会后低于这个我code），但我遇到的问题是，当我们有一个较长的列表框（即20+列表项），IE基本上让你看着它将会滚动显示所有这些，选择他们所有。 Chrome不存在这个问题，和Firefox至少快了很多，但IE是浏览器客户的一个很好的75％+使用。

So this already WORKS in Javascript (and I'll post my code below this), but the problem I'm encountering is that when we have a longer listbox (that is, 20+ list items), IE essentially makes you watch as it scrolls through all of them and selects them all. Chrome doesn't have this problem, and Firefox is at least a lot faster, but IE is the browser a good 75%+ of our customers use.

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：

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

（我复制这对每个适用列表框/复选框组合 - 这是一个可扩展的任务）

(I've replicated this for every applicable Listbox/Checkbox combination - it's a scalable task)

所以实际的问题：

1. 是我利用JQuery的，而不是JavaScript，此功能，我将能够避免整个滚动/选择的效果？

1. Were I to utilize JQuery rather than Javascript for this functionality, would I be able to avoid that whole "scrolling/selecting" effect?

如果我能够避免滚动效果，我怎么能动态传递列表框中JQuery的，而不是写一个自定义的方法为每个列表框/复选框组合？

If I can avoid that scrolling effect, how can I dynamically pass the listbox to JQuery rather than having to write a custom method out for each Listbox/Checkbox combination?

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

Thank you for reading and thank you for any help offered.

推荐答案

我没有IE浏览器在手，检查你指的是滚动效果，但它应该很容易让你测试。你可以让你的selectDeselect功能，但它可能会改变这样的事情（假设的jQuery 1.7.2〜+）：

I don't have IE on hand to check the scrolling effect you are referring to but it should be easy enough for you to test. You could keep your selectDeselect function but it might change to something like this (assuming 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的code是快，但给它一个去...

I would expect the non-jQuery code to be faster but give it a go...

编辑：以上是在IE中慢太多

The above is slow in IE too.

我不是这种方法的粉丝，但你可以尝试更换在选择下拉实际的HTML。是这样的：

I'm not a fan of this method but you could try replacing the actual HTML in the select dropdown. Something like:

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

这篇关于动态地选择在多选列表框使用jQuery的所有项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！