Comment puis-je accélérer jquery: sélecteur sélectionné?

Question

J'ai un menu déroulant dans une page web avec 3830 éléments en elle. Je sais, excessive mais peu importe.

En jquery je reçois la valeur de l'option sélectionnée en utilisant l'instruction:

$ ( "#institutionCombo: sélectionné") .val ();

Il y a une pause notable avant la sélection se trouve. Une fois que je reçois cette valeur, je l'insérer dans une zone de texte sur la page, alors je sais à quelle vitesse. De plus, je l'ai vérifié à l'aide de points d'arrêt dans Firebug.

Si je vais vieille école et d'utiliser ce javascript:

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

Cette vitesse est instananeous.

Y at-il quelque chose en héritage jquery qui rend le: sélecteur sélectionné si lent lorsque les chiffres sont trop élevés? Je voudrais rester avec jquery tout au long dans mes scripts, quelqu'un at-il une suggestion pour accélérer la recherche de l'option sélectionnée dans jquery?

Merci,

Craig

Answer 1

Il n'y a pas besoin d'appeler le: sélectionné lors de l'obtention de la val d'une boîte de sélection

.

Le comportement par défaut est d'obtenir le selectedIndex

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

Comme il est indiqué dans le commentaire, Si vous avez besoin pour accéder au texte de cette option, vous pouvez utiliser

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

bien que si vous savez que vous avez besoin de la propriété de texte et son différent de la valeur que vous pouvez juste utiliser directement le selectedIndex.

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()

Voici l'extrait de la source 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;  
    // ...  
},

Lorsque vous appelez le: sélecteur sélectionné qui se passe en boucle à travers tous les éléments de sélection decendents la recherche de la propriété .selected à régler et retourne un tableau de tout. De toute façon vous le faites il boucle tous decendents, il ne faut pas le faire.

Answer 2

Vous pouvez faire ceci:

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

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

mais, c'est effectivement ce que vous faites dans votre code old-school.

Je suis surpris qu'il y ait un retard notable, étant donné que je l'aurais pensé que ce que je fais ci-dessus est ce que le code jQuery fait pour le:. Sélecteur sélectionné

Dans le cas contraire, je me demande si elle est une erreur de syntaxe qui est à l'origine du retard, vous devriez probablement faire

$ ( "l'option #institutionCombo: sélectionnée") .val ();

(option Note: sélectionné vs: sélectionné)