Сортировка элементов элементов в алфавитном порядке с помощью jQuery

Ответ 1

Что бы я сделал:

• Извлечь текст и значение каждого <option> в массив объектов;
• Сортировка массива
• Обновите элементы <option> с содержимым массива в порядке.

Чтобы сделать это с помощью jQuery, вы можете сделать это:

var options = $('select.whatever option');
var arr = options.map(function(_, o) { return { t: $(o).text(), v: o.value }; }).get();
arr.sort(function(o1, o2) { return o1.t > o2.t ? 1 : o1.t < o2.t ? -1 : 0; });
options.each(function(i, o) {
  o.value = arr[i].v;
  $(o).text(arr[i].t);
});

Вот рабочий jsfiddle.

edit — Если вы хотите сортировать так, чтобы вы игнорировали буквенный регистр, перед использованием сравнения вы можете использовать функции JavaScript .toUpperCase() или .toLowerCase():

arr.sort(function(o1, o2) {
  var t1 = o1.t.toLowerCase(), t2 = o2.t.toLowerCase();

  return t1 > t2 ? 1 : t1 < t2 ? -1 : 0;
});

Ответ 2

Принятый ответ не самый лучший во всех случаях, потому что иногда вы хотите сохранить классы опций и разные аргументы (например, data-foo).

Мое решение:

var sel = $('#select_id');
var selected = sel.val(); // cache selected value, before reordering
var opts_list = sel.find('option');
opts_list.sort(function(a, b) { return $(a).text() > $(b).text() ? 1 : -1; });
sel.html('').append(opts_list);
sel.val(selected); // set cached selected value

//Для ie11 или тех, кто получает пустые опции, замените html ('') empty()

Ответ 3

<select id="mSelect" >
    <option value="val1" > DEF </option>
    <option value="val4" > GRT </option>
    <option value="val2" > ABC </option>
    <option value="val3" > OPL </option>
    <option value="val5" > AWS </option>
    <option value="val9" > BTY </option>
</select>

.

$("#mSelect").append($("#mSelect option").remove().sort(function(a, b) {
    var at = $(a).text(), bt = $(b).text();
    return (at > bt)?1:((at < bt)?-1:0);
}));

Ответ 4

HTML:

<select id="list">
    <option value="op3">option 3</option>
    <option value="op1">option 1</option>
    <option value="op2">option 2</option>
</select>

JQuery

var options = $("#list option");                    // Collect options         
options.detach().sort(function(a,b) {               // Detach from select, then Sort
    var at = $(a).text();
    var bt = $(b).text();         
    return (at > bt)?1:((at < bt)?-1:0);            // Tell the sort function how to order
});
options.appendTo("#list");                          // Re-attach to select

Я использовал решение tracevipin, которое работало фантастически. Я предоставляю немного измененную версию здесь для тех, кто любит меня, который любит находить легко читаемый код и сжимать его после его понимания. Я также использовал .detach вместо .remove для сохранения любых привязок к элементам DOM опции.

Ответ 5

Здесь моя улучшенная версия Pointy solution:

function sortSelectOptions(selector, skip_first) {
    var options = (skip_first) ? $(selector + ' option:not(:first)') : $(selector + ' option');
    var arr = options.map(function(_, o) { return { t: $(o).text(), v: o.value, s: $(o).prop('selected') }; }).get();
    arr.sort(function(o1, o2) {
      var t1 = o1.t.toLowerCase(), t2 = o2.t.toLowerCase();
      return t1 > t2 ? 1 : t1 < t2 ? -1 : 0;
    }); 
    options.each(function(i, o) {
        o.value = arr[i].v;
        $(o).text(arr[i].t);
        if (arr[i].s) {
            $(o).attr('selected', 'selected').prop('selected', true);
        } else {
            $(o).removeAttr('selected');
            $(o).prop('selected', false);
        }
    }); 
}

Функция имеет параметр skip_first, который полезен, когда вы хотите сохранить первый вариант сверху, например. когда он "выбирает ниже:".

Он также отслеживает ранее выбранную опцию.

Пример использования:

jQuery(document).ready(function($) {

  sortSelectOptions('#select-id', true);

});

Ответ 6

jquery.selectboxes.js плагин имеет метод сортировки. Вы можете реализовать плагин или погрузиться в код, чтобы увидеть способ сортировки параметров.

Ответ 7

Это даст вам возможность переставить их вручную, если вам это нужно

Как бы вы динамически заказывали < option select > с помощью JQuery?

Ответ 8

Да, вы можете отсортировать параметры по его тексту и добавить его обратно в поле выбора.

 function NASort(a, b) {    
      if (a.innerHTML == 'NA') {
          return 1;   
      }
      else if (b.innerHTML == 'NA') {
          return -1;   
      }       
      return (a.innerHTML > b.innerHTML) ? 1 : -1;
  };

Скрипка: https://jsfiddle.net/vaishali_ravisankar/5zfohf6v/

Ответ 9

Я знаю, что эта тема старая, но я думаю, что мой ответ может быть полезен для многих людей.

Вот плагин jQuery, сделанный из ответа Pointy, используя ES6:

/**
 * Sort values alphabetically in select
 * source: http://stackoverflow.com/questions/12073270/sorting-options-elements-alphabetically-using-jquery
 */
$.fn.extend({
    sortSelect() {
        let options = this.find("option"),
            arr = options.map(function(_, o) { return { t: $(o).text(), v: o.value }; }).get();

        arr.sort((o1, o2) => { // sort select
            let t1 = o1.t.toLowerCase(), 
                t2 = o2.t.toLowerCase();
            return t1 > t2 ? 1 : t1 < t2 ? -1 : 0;
        });

        options.each((i, o) => {
            o.value = arr[i].v;
            $(o).text(arr[i].t);
        });
    }
});

Использование очень просто

$("select").sortSelect();

Ответ 10

Ответ Malakgeorge хороший, он может быть легко перенесен в функцию jQuery:

$.fn.sortSelectByText = function(){
    this.each(function(){
        var selected = $(this).val(); 
        var opts_list = $(this).find('option');
        opts_list.sort(function(a, b) { return $(a).text() > $(b).text() ? 1 : -1; });
        $(this).html('').append(opts_list);
        $(this).val(selected); 
    })
    return this;        
}