Каков наиболее эффективный способ сортировки параметров Html Select по значению, сохраняя при этом текущий выбранный элемент?

Ну, в IE6, похоже, выполняется сортировка по элементу [0] вложенного массива:

function sortSelect(selectToSort) {
    var arrOptions = [];

    for (var i = 0; i < selectToSort.options.length; i++)  {
        arrOptions[i] = [];
        arrOptions[i][0] = selectToSort.options[i].value;
        arrOptions[i][1] = selectToSort.options[i].text;
        arrOptions[i][2] = selectToSort.options[i].selected;
    }

    arrOptions.sort();

    for (var i = 0; i < selectToSort.options.length; i++)  {
        selectToSort.options[i].value = arrOptions[i][0];
        selectToSort.options[i].text = arrOptions[i][1];
        selectToSort.options[i].selected = arrOptions[i][2];
    }
}

Я посмотрю, работает ли это в других браузерах ...

Обновлено: он работает и в Firefox, у-у-у!

Есть ли более простой способ, чем этот? есть ли какой-то метод, встроенный в javascript или jQuery, который сортирует, выбирает, что мне не хватает, или это лучший способ?

Array.sort() по умолчанию преобразует каждый элемент в строку и сравнивает эти значения. Итак, ["value", "text", "selected"] сортируется как "value, text, selected". Что, вероятно, будет работать нормально в большинстве случаев.

Если вы хотите отсортировать только значение или интерпретировать значение как число, вы можете передать функцию сравнения в sort ():

arrOptions.sort(function(a,b) { return new Number(a[0]) - new Number(b[0]); });

Есть закрытый билет jQuery для сортировки, которая должна работать, но просто не была включена в ядро.

jQuery.fn.sort = function() {
  return this.pushStack( [].sort.apply( this, arguments ), []);
};

Ссылаясь на ветка групп Google, я думаю, вы просто передаете функцию, которая используется для сортировки, например

function sortSelect(selectToSort) {
    jQuery(selectToSort.options).sort(function(a,b){ 
        return a.value > b.value ? 1 : -1; 
    });
}

Надеюсь, это поможет!

Извлечь параметры во временный массив, отсортировать и перестроить список:

var my_options = $("#my_select option");
var selected = $("#my_select").val();

my_options.sort(function(a,b) {
    if (a.text > b.text) return 1;
    if (a.text < b.text) return -1;
    return 0
})

$("#my_select").empty().append( my_options );
$("#my_select").val(selected);

Документация по сортировке Mozilla (в частности функция compareFunction) и Страница алгоритма сортировки в Википедии являются релевантными.

Если вы хотите сделать сортировку нечувствительной к регистру, замените text на text.toLowerCase()

Показанная выше функция сортировки показывает, как выполнять сортировку. Точная сортировка неанглийских языков может быть сложной (см. алгоритм сортировки юникода). Использование localeCompare в функции сортировки - хорошее решение, например:

my_options.sort(function(a,b) {
    return a.text.localeCompare(b.text);
});

Я только что обернул идею Марка в функцию jquery

$('#your_select_box').sort_select_box();

Функция JQuery:

$.fn.sort_select_box = function(){
    var my_options = $("#" + this.attr('id') + ' option');
    my_options.sort(function(a,b) {
        if (a.text > b.text) return 1;
        else if (a.text < b.text) return -1;
        else return 0
    })
   return my_options;
}

Немного изменен ответ Тома выше, так что он фактически изменяет содержимое поля выбора для сортировки, а не просто возвращает отсортированные элементы.

$('#your_select_box').sort_select_box();

Функция jQuery:

$.fn.sort_select_box = function(){
    // Get options from select box
    var my_options = $("#" + this.attr('id') + ' option');
    // sort alphabetically
    my_options.sort(function(a,b) {
        if (a.text > b.text) return 1;
        else if (a.text < b.text) return -1;
        else return 0
    })
   //replace with sorted my_options;
   $(this).empty().append( my_options );

   // clearing any selections
   $("#"+this.attr('id')+" option").attr('selected', false);
}

Помните: если вы хотите использовать селектор контекста, просто объедините идентификатор, это не сработает.

$.fn.sort_select_box = function(){
    var my_options = $("option", $(this));
    my_options.sort(function(a,b) {
        if (a.text > b.text) return 1;
        else if (a.text < b.text) return -1;
        else return 0
    });
    $(this).empty().append(my_options);
}

// Usando:
$("select#ProdutoFornecedorId", $($context)).sort_select_box();

Это лучшее решение. Объявить глобальную функцию в JQuery

$.fn.sortSelect = function() {
    var op = this.children("option");
    op.sort(function(a, b) {
        return a.text > b.text ? 1 : -1;
    })
    return this.empty().append(op);
}

И вызовите функцию из кода.

$("#my_select").sortSelect();

Решение, которое я упомянул в своем комментарии к @Juan Perez

$.fn.sortOptions = function(){
    $(this).each(function(){
        var op = $(this).children("option");
        op.sort(function(a, b) {
            return a.text > b.text ? 1 : -1;
        })
        return $(this).empty().append(op);
    });
}

Использование:

$("select").sortOptions();

Это все еще можно улучшить, но мне не нужно было добавлять больше наворотов :)

Немного поздно, но, как бы то ни было, я реализовал более сложную функцию, которую вы можете включить в общем виде. У него есть несколько вариантов для разнообразного вывода. Он также может рекурсивно переходить в теги <OPTGROUP> в зависимости от их метки.

$.fn.sortSelect = function(options){

    const OPTIONS_DEFAULT = {
        recursive:      true,   // Recurse into <optgroup>
        reverse:        false,  // Reverse order
        useValues:      false,  // Use values instead of text for <option> (<optgruop> is always label based)
        blankFirst:     true,   // Force placeholder <option> with empty value first, ignores reverse
    }

    if (typeof options != "object" || null === options) {
        options = OPTIONS_DEFAULT;
    }

    var sortOptions = function($root, $node, options){

        if ($node.length != 1) {
            return false;
        }

        if ($node[0].tagName != "SELECT" && $node[0].tagName != "OPTGROUP") {
            return false;
        }

        if (options.recursive) {
            $node.children('optgroup').each(function(k, v){
                return sortOptions($root, $(v), options);
            });
        }

        var $options        = $node.children('option, optgroup');
        var $optionsSorted  = $options.sort(function(a, b){

            if (options.blankFirst) {
                if (a.tagName == "OPTION" && a.value == "") {
                    return -1;
                }

                if (b.tagName == "OPTION" && b.value == "") {
                    return 1;
                }
            }

            var textA = (a.tagName == "OPTION" ? (options.useValues ? a.value : a.text) : a.label);
            var textB = (b.tagName == "OPTION" ? (options.useValues ? a.value : b.text) : b.label);

            if (textA > textB) {
                return options.reverse ? -1 : 1;
            }

            if (textA < textB) {
                return options.reverse ? 1 : -1;
            }

            return 0;

        });

        $options.remove();
        $optionsSorted.appendTo($node);

        return true;

    };

    var selected = $(this).val();
    var sorted = sortOptions($(this), $(this), {...OPTIONS_DEFAULT, ...options});
    $(this).val(selected);

    return sorted;

};

Затем вы можете вызвать функцию sortSelect() для любого тега <SELECT> или только для одного <OPTGROUP>, чтобы отсортировать только параметры группы.

Пример:

$('select').sortSelect();

Обратный порядок с использованием опции «реверс»:

$('select').sortSelect({
    reverse: true
});

Вы можете применить это ко всем выборкам автоматически, возможно, только если они включают важный класс (например, "js-sort") следующим образом:

$('select.js-sort').each(function(k, v){
    $(v).sortSelect();
});