Как я могу ускорить селектор jquery:selected?

Question

У меня есть раскрывающийся список на веб-странице с 3830 элементами.Я знаю, чрезмерно, но неважно.

В jquery я получаю значение выбранной опции, используя оператор:

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

Прежде чем выделение будет найдено, возникает заметная пауза.Как только я получаю это значение, я вставляю его в текстовое поле на странице, чтобы знать, насколько быстро.Плюс я проверил это с помощью точек останова в Firebug.

Если я пойду в старую школу и использую этот JavaScript:

var div = document.getElementById("maindiv");
var select = div.getElementsByTagName("выбрать") [0];
вар ix = select.selectedIndex;
вар instId = select.options[ix].value;

Эта скорость мгновенная.

Есть ли что-то наследственное в jquery, что делает селектор :selected таким медленным, когда числа становятся слишком большими?Я бы хотел использовать jquery в своих сценариях. Есть ли у кого-нибудь предложения по ускорению поиска выбранного параметра в jquery?

Спасибо,

Крейг

Answer 1

Нет необходимости вызывать :selected при получении значения поля выбора.

Поведение по умолчанию — получить selectedIndex.

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

Как отмечено в комментарии, если вам нужен доступ к тексту этой опции, вы можете использовать

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

хотя, если вы знаете, что вам нужно свойство text и оно отличается от значения, вы можете просто использовать 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()

Вот фрагмент из источника 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, который просматривает все потомки элементов select в поисках свойства .selected, которое нужно установить, и возвращает любой массив.В любом случае, вы это сделаете, все потомки будут зациклены, поэтому не делайте этого.

Answer 2

Вы можете сделать это:

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

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

но, по сути, именно это вы и делаете в своем старом коде.

Я удивлен заметной задержкой, поскольку я мог подумать, что то, что я делаю выше, — это то же самое, что код jQuery делает для селектора :selected.

В противном случае мне интересно, является ли это синтаксической ошибкой, вызывающей задержку, вам, вероятно, следует сделать

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

(опция примечания: выбрано или: выбрано)