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

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 bination - 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 bination?

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

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

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 bination - 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 bination?

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

• javascript
• jquery
• asp

• 1 Did you try to do it in jQuery and see if it makes a difference? Ut basically does the same thing you do. It is a loop where they set the attribute. $(listbox.id).find("option").attr('selected', 'selected'); – epascarello Commented Mar 5, 2013 at 18:04
• I just got pulled into a meeting, but I'll try that as soon as I'm back at my desk. I was stuck trying to use something like $("#multi option")... And then the rest of the line similar to what you posted. – RockiesMagicNumber Commented Mar 5, 2013 at 18:11
• OK, so after implementing the code: $(multi).find("option").attr("selected", "selected"); it appears that the functionality is the same, and that IE is going to perform that "scrolling/selecting" effect. Is there a way to perform this client-side without that scrolling/selecting? – RockiesMagicNumber Commented Mar 5, 2013 at 19:59

2 Answers 2

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!

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

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

Edit: The above is slow in IE too.

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

It seems to work in IE9: jsfiddle