Каков наиболее эффективный способ сортировки параметров «Выбор HTML» по значению при сохранении выбранного в данный момент элемента?

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

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

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