Dynamically select all items in a Multi-Select listbox using jquery

Question

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.

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.

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.

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:

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)

So to the actual questions:

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

2. 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.

Answer 1

Check out this post:

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

jQuery: Select all options in a Multiple Select Listbox

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

A multiple select listbox with everything already selected for you!