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

Question

У меня есть jQuery, но я не уверен, есть ли в нем встроенные помощники по сортировке.Я мог бы создать двумерный массив каждого элемента text, value, и selected свойства, но я не думаю, что JavaScript встроен в Array.sort() будет работать правильно.

Answer 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 (в частности, функция сравнения) и Страница алгоритма сортировки в Википедии актуальны.

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

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

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

Answer 2

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

$('#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);
}

Answer 3

Я только что обернул идею Марка в функцию 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;
}

Answer 4

Решение, которое я упомянул в своем комментарии к @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();

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

Answer 5

Есть закрытый билет 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; 
    });
}

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

Answer 6

Что ж, в 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, который сортирует выбранные значения, которых мне не хватает, или это лучший способ?

Answer 7

Это лучшее решение.Объявите глобальную функцию в 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();

Answer 8

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

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

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

Answer 9

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

$.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();