Question

I need to speed up this jQuery line for select tag with possilbly several thousand option tags. Is there anything faster than the following jQuery line? Maybe javascript? I’m even looking for a replacement b/c code is slow and unresponsive if used in conjunction with a selecttagname change event.

var selectedsize = $("Select[name='selecttagname'] option:selected").size();


 <select multiple name='selecttagname'>
 <option selected="selected" value="1">Aladin</option>
 <option value="2">Atlantis</option>
.... ~5000 more of these</option></select>

Thanks.

Answer 1

to start with, your selector is invalid so jQuery is manually parsing the selector AND the DOM tree to find your elements.

this is a slight improvement over what you have:

var count = $('select[name="selecttagname"]').find('option:selected').length

notice how I also split the selector in 2, the first part will be accelerated by browsers that support querySelectorAll API and simplifies the second query which is still custom and will remain slow-ish (:selected is a jQuery extension). This is the best you can do with just jQuery.

Now for possibly some extra speed you can manually query the DOM, not sure if this is gonna be faster, but you can skip the Sizzle parser for the ‘:selected’ part.

try this:

var count = $('select[name="selecttagname"] option').filter(function() {
    return this.selected;
}).length;

In theory, this last one is faster. Let us know what are your findings after testing it.