Javascript来对select元素的内容进行排序

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

使用Marco Lazzeri和Terre Porter提供的答案（如果此答案有用，请投票），我想出了一个稍有不同的解决方案，该解决方案使用以下方式保留选定的值（尽管可能不保留事件处理程序或附加数据）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 4

这是我在这个板上最喜欢的 3 个答案的重新编译：

• jOk 最好、最简单的答案。
• Terry Porter 的简单 jQuery 方法。
• SmokeyPHP 的可配置功能。

结果是一个易于使用且易于配置的功能。

第一个参数可以是选择对象、选择对象的 ID 或至少具有 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（即 sortme 的索引）对数组进行排序。

主要排序功能

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 5

Vanilla JS es6 本地化选项排序示例

const optionNodes = Array.from(selectNode.children);
const comparator = new Intl.Collator(lang.slice(0, 2)).compare;

optionNodes.sort((a, b) => comparator(a.textContent, b.textContent));
optionNodes.forEach((option) => selectNode.appendChild(option));

我的用例是使用区域设置感知排序本地化国家选择下拉列表。这用于 250 多个选项，并且在我的机器上性能非常高~10ms。