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

Question

J'ai une liste déroulante dans une page Web avec 3830 éléments en elle. Je sais, excessif 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 que la sélection soit trouvée. Une fois que je reçois cette valeur, je l'insère dans une zone de texte sur la page, donc je sais à quelle vitesse. De plus, je l'ai vérifié en utilisant des points d'arrêt dans Firebug.

Si je old school 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 instantanée.

Y a-t-il quelque chose d'hérité dans jquery qui rend le sélecteur: si lent quand les nombres deviennent trop élevés? Je voudrais rester avec jquery tout au long de mes scripts, est-ce que quelqu'un a 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 besoin de la propriété text et de sa différence par rapport à la valeur que vous pourriez vouloir utiliser directement avec 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 boucle passe par tous les éléments de sélection decendents à la recherche de la propriété .selected être défini et retournera un tableau de tout. De toute façon vous faites cela, il faudra boucler tous les décrets, alors ne le faites pas.

Answer 2

Vous pouvez le faire:

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

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

mais, c'est effectivement ce que vous faites dans votre code de la vieille école.

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

Sinon, 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é)