Javascript для сортировки содержимого выбранного элемента

Question

Есть ли быстрый способ сортировки элементов выбранного элемента? Или я должен прибегнуть к написанию javascript?

Пожалуйста, любые идеи.

<select size="4" name="lstALL" multiple="multiple" id="lstALL" tabindex="12" style="font-size:XX-Small;height:95%;width:100%;">
<option value="0"> XXX</option>
<option value="1203">ABC</option>
<option value="1013">MMM</option>
</select>

Answer 1

Это сделает свое дело. Просто передайте его элементу выбора а-ля: document.getElementById('lstALL'), когда вам нужно отсортировать список.

function sortSelect(selElem) {
    var tmpAry = new Array();
    for (var i=0;i<selElem.options.length;i++) {
        tmpAry[i] = new Array();
        tmpAry[i][0] = selElem.options[i].text;
        tmpAry[i][1] = selElem.options[i].value;
    }
    tmpAry.sort();
    while (selElem.options.length > 0) {
        selElem.options[0] = null;
    }
    for (var i=0;i<tmpAry.length;i++) {
        var op = new Option(tmpAry[i][0], tmpAry[i][1]);
        selElem.options[i] = op;
    }
    return;
}

Answer 2

Это решение сработало очень хорошо для меня, используя jquery, хотя я решил сделать перекрестную ссылку на него здесь, когда нашел эту страницу раньше, чем на другой. Кто-то другой может сделать то же самое.

$("#id").html($("#id option").sort(function (a, b) {
    return a.text == b.text ? 0 : a.text < b.text ? -1 : 1
}))

из Сортировка выпадающего списка с использованием Javascript

Answer 3

Другой вариант:

function sortSelect(elem) {
    var tmpAry = [];
    // Retain selected value before sorting
    var selectedValue = elem[elem.selectedIndex].value;
    // Grab all existing entries
    for (var i=0;i<elem.options.length;i++) tmpAry.push(elem.options[i]);
    // Sort array by text attribute
    tmpAry.sort(function(a,b){ return (a.text < b.text)?-1:1; });
    // Wipe out existing elements
    while (elem.options.length > 0) elem.options[0] = null;
    // Restore sorted elements
    var newSelectedIndex = 0;
    for (var i=0;i<tmpAry.length;i++) {
        elem.options[i] = tmpAry[i];
        if(elem.options[i].value == selectedValue) newSelectedIndex = i;
    }
    elem.selectedIndex = newSelectedIndex; // Set new selected index after sorting
    return;
}

Answer 4

У меня была такая же проблема. Вот решение jQuery , которое я придумал:

  var options = jQuery.makeArray(optionElements).
                       sort(function(a,b) {
                         return (a.innerHTML > b.innerHTML) ? 1 : -1;
                       });
  selectElement.html(options);

Answer 5

Из W3C FAQ :

Хотя во многих языках программирования есть устройства, такие как раскрывающиеся списки, в которых предусмотрена возможность сортировки списка элементов перед их отображением в рамках их функций, функция HTML

Вы должны были бы отсортировать их вручную для статического HTML-документа, или прибегнуть к Javascript или некоторой другой программной сортировке для динамического документа.

Answer 6

Работая с ответами, предоставленными Марко Лазцери и Терре Портером (проголосуйте за них, если этот ответ полезен), я придумал немного другое решение, которое сохраняет выбранное значение (вероятно, не сохраняет обработчики событий или прикрепленные данные, хотя) используя jQuery .

// save the selected value for sorting
var v = jQuery("#id").val();

// sort the options and select the value that was saved
j$("#id")
    .html(j$("#id option").sort(function(a,b){
        return a.text == b.text ? 0 : a.text < b.text ? -1 : 1;}))
    .val(v);

Answer 7

Это перекомпиляция моих 3 любимых ответов на этом форуме:

• Лучший и самый простой ответ Джока.
• Простой метод jQuery Терри Портера.
• Настраиваемая функция SmokeyPHP.

Результаты представляют собой простую в использовании и легко настраиваемую функцию.

Первый аргумент может быть объектом выбора, идентификатором объекта выбора или массивом как минимум с 2 измерениями.

Второй аргумент не обязателен. По умолчанию используется сортировка по тексту опции, индекс 0. Может быть передан любой другой индекс, поэтому сортируйте по нему. Может быть передано 1 или текст «значение», чтобы отсортировать по значению.

Сортировка по текстовым примерам (все будут отсортированы по тексту):

 sortSelect('select_object_id');
 sortSelect('select_object_id', 0);
 sortSelect(selectObject);
 sortSelect(selectObject, 0);

Сортировка по значению (все будут отсортированы по значению):

 sortSelect('select_object_id', 'value');
 sortSelect('select_object_id', 1);
 sortSelect(selectObject, 1);

Сортировка любого массива по другому индексу:

var myArray = [
  ['ignored0', 'ignored1', 'Z-sortme2'],
  ['ignored0', 'ignored1', 'A-sortme2'],
  ['ignored0', 'ignored1', 'C-sortme2'],
];

sortSelect(myArray,2);

Последний сортирует массив по индексу-2, по сортировке.

Основная функция сортировки

function sortSelect(selElem, sortVal) {

    // Checks for an object or string. Uses string as ID. 
    switch(typeof selElem) {
        case "string":
            selElem = document.getElementById(selElem);
            break;
        case "object":
            if(selElem==null) return false;
            break;
        default:
            return false;
    }

    // Builds the options list.
    var tmpAry = new Array();
    for (var i=0;i<selElem.options.length;i++) {
        tmpAry[i] = new Array();
        tmpAry[i][0] = selElem.options[i].text;
        tmpAry[i][1] = selElem.options[i].value;
    }

    // allows sortVal to be optional, defaults to text.
    switch(sortVal) {
        case "value": // sort by value
            sortVal = 1;
            break;
        default: // sort by text
            sortVal = 0;
    }
    tmpAry.sort(function(a, b) {
        return a[sortVal] == b[sortVal] ? 0 : a[sortVal] < b[sortVal] ? -1 : 1;
    });

    // removes all options from the select.
    while (selElem.options.length > 0) {
        selElem.options[0] = null;
    }

    // recreates all options with the new order.
    for (var i=0;i<tmpAry.length;i++) {
        var op = new Option(tmpAry[i][0], tmpAry[i][1]);
        selElem.options[i] = op;
    }

    return true;
}

Answer 8

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

function sortSelect(selElem) {
  for (var i=0; i<(selElem.options.length-1); i++)
      for (var j=i+1; j<selElem.options.length; j++)
          if (parseInt(selElem.options[j].value) < parseInt(selElem.options[i].value)) {
              var dummy = new Option(selElem.options[i].text, selElem.options[i].value);
              selElem.options[i] = new Option(selElem.options[j].text, selElem.options[j].value);
              selElem.options[j] = dummy;
          }
}

Answer 9

Í думаю, что это лучший вариант (я использую код @ Мэтти и улучшил!):

function sortSelect(selElem, bCase) {
                var tmpAry = new Array();
                bCase = (bCase ? true : false);
                for (var i=0;i<selElem.options.length;i++) {
                        tmpAry[i] = new Array();
                        tmpAry[i][0] = selElem.options[i].text;
                        tmpAry[i][1] = selElem.options[i].value;
                }
                if (bCase)
                    tmpAry.sort(function (a, b) {
                        var ret = 0;
                        var iPos = 0;
                        while (ret == 0 && iPos < a.length && iPos < b.length)
                        {
                            ret = (String(a).toLowerCase().charCodeAt(iPos) - String(b).toLowerCase().charCodeAt(iPos));
                            iPos ++;
                        }
                        if (ret == 0)
                        {
                            ret = (String(a).length - String(b).length);
                        }
                        return ret;
                        });
                else
                    tmpAry.sort();
                while (selElem.options.length > 0) {
                    selElem.options[0] = null;
                }
                for (var i=0;i<tmpAry.length;i++) {
                        var op = new Option(tmpAry[i][0], tmpAry[i][1]);
                        selElem.options[i] = op;
                }
                return;
        }

Answer 10

Да, DOK имеет правильный ответ ... либо предварительно отсортируйте результаты перед тем, как писать HTML (при условии, что он динамический, и вы отвечаете за вывод), либо пишите javascript.

Метод Javascript Sort станет вашим другом здесь. Просто вытащите значения из списка выбора, затем отсортируйте их и верните обратно: -)