How to speed up jquery: selected selector?

Question

I have a drop down list on a web page with 3830 elements. I know excessive, but anything.

In jquery, I get the selected parameter value using the statement:

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

Before detecting a selection, a noticeable pause appears. As soon as I get this value, I paste it into the text box on the page, so I know how fast. Plus I tested it with breakpoints in Firebug.

If I am an 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 inherited in jquery that makes the selected selector so slow when numbers get too high? I would like to stick with jquery in my scripts, does anyone have a suggestion to speed up the search for the selected parameter in jquery?

Thanks,

Craig

Answer 1

No need to call: selected when receiving the character of the selection field.

The default behavior is to get the selectedIndex value.

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

As noted in the comment, if you need to access the text of this option, you can use

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

though, if you know that you need a text property, and it is different from a value, you might just want to use 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()

jquery (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;  
    // ...  
},

: , , .selected, , . , , , .

Answer 2

:

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

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

, .

, , , , , , jQuery .

, , , , ,

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

( : vs: selected)