How can I speed up jquery :selected selector?

Question

I have a dropdown in a web page with 3830 elements in it. I know, excessive but whatever.

In jquery I get the selected option value using the statement:

$( "#institutionCombo :selected" ).val();

There is a noticeable pause before the selection is found. Once I get that value I insert it into a textbox on the page, so I know how fast. Plus I've checked it using breakpoints in Firebug.

If I go old school and use this javascript:

var div = document.getElementById( "maindiv" );
var select = div.getElementsByTagName( "select" )[ 0 ];
var ix = select.selectedIndex;
var instId = select.options[ ix ].value;

This speed is instananeous.

Is there something inherit in jquery that makes the :selected selector so slow when the numbers get too high? I'd like to stick with jquery throughout in my scripts, does anyone have a suggestion to speed up finding the selected option in jquery?

Thanks,

Craig

Answer 1

There is no need to call the :selected when getting the val of a select box.

The default behavior is to get the selectedIndex

$( "#institutionCombo").val();

As noted in the comment, If you need to access the text of that option you can use

$( "#institutionCombo option[value=" + $( "#institutionCombo").val(); + "]").text();

although if you know you need the text property and its different from the value you may just want to use the selectedIndex directly.

var combo = $("#institutionCombo").get(0); 
combo = combo ? combo : {selectedIndex: -1}; // handle no combo returned
if (combo.selectedIndex < 0)
  return; // nothing selected
$('#institutionCombo option:eq(' + combo.selectedIndex + ')').text()

Here is the snippet from the jquery source (v1.3)

val: function( value ) {
    // ...  
    // We need to handle select boxes special
    if ( jQuery.nodeName( elem, "select" ) ) {
        var index = elem.selectedIndex,
            values = [],
            options = elem.options,
            one = elem.type == "select-one";

        // Nothing was selected
        if ( index < 0 )
            return null;

        // Loop through all the selected options
        for ( var i = one ? index : 0, max = one ? index + 1 : options.length; i < max; i++ ) {
            var option = options[ i ];

            if ( option.selected ) {
                // Get the specifc value for the option
                value = jQuery(option).val();

                // We don't need an array for one selects
                if ( one )
                    return value;

                // Multi-Selects return an array
                values.push( value );
            }
        }

        return values;  
    // ...  
},

When you call the :selected selector that is going loop through all the select elements decendents looking for the .selected property to be set and will return an array of any. Either way you do this it will loop all decendents, so don't do this.

Answer 2

You could do this:

var ix = $( "#institutionCombo" ).attr( "selectedIndex" );

var value = $( "#institutionCombo option:eq(" + ix +")" ).val();

but, that's effectively what you are doing in your old-school code.

I'm surprised that there is a noticeable delay, since I would have thought that what I'm doing above is what the jQuery code is doing for the :selected selector.

Otherwise, I wonder if it is a syntax error that is causing the delay, you should probably be doing

$( "#institutionCombo option:selected" ).val();

(note option:selected vs :selected)