Javascript对选择元素的内容进行排序

IT技术 javascript select
2021-02-08 14:53:29

有没有一种快速的方法来对选择元素的项目进行排序？或者我不得不求助于编写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>
6个回答

这将解决问题。只需将您的选择元素传递给 la：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;
}
这是真的。我认为作者提到要按显示名称排序。可以重写以采用额外的参数，指示是按显示还是按值排序。我还想知道是否有一种更简洁的方法可以将选项结构复制到数组中。
2021-03-19 14:53:29
与仅对文本值进行排序相比，这会导致排序顺序略有不同。这是因为 tmpAry.sort() 将根据 Array 对象的字符串表示进行排序。例如，对于两个项目“Name”和“Name 2”（其中文本和值相同），排序会将“Name”放在“Name 2”之后（因为它实际上是在比较字符串“Name,Name”和“Name” 2，名称 2")。为了解决这个问题，自定义排序函数需要传递给 sort 方法。
2021-03-26 14:53:29
可在此处作为小书签提供，nattlefitz.com /blog/ archives/2006/04/04/301（不是我的博客，只是非常有用）。
2021-03-27 14:53:29
这是一个不错的解决方案，但它将摆脱插入到选项中的任何属性……而对类似问题的其他答案将完成工作并保留属性：stackoverflow.com/questions/667010/……
2021-03-31 14:53:29
这按文本对元素进行排序，如果要按值排序，则应将值设置为索引 0 ！-)
2021-04-01 14:53:29

这个解决方案对我使用 jquery 非常有效，我想我会在这里交叉引用它，因为我在另一个页面之前找到了这个页面。其他人可能也会这样做。

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

从使用 Javascript 排序下拉列表

使用 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);

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。

来自W3C 常见问题解答：

尽管许多编程语言都有像下拉框这样的设备，可以在将项目列表作为其功能的一部分显示之前对其进行排序，但 HTML <select> 函数没有这样的功能。它按照收到的顺序列出 <options>。

对于静态 HTML 文档，您必须手动对它们进行排序，或者对动态文档使用 Javascript 或其他一些编程排序。

其它你可能感兴趣的问题
上一篇检测到双击事件时需要取消单击/鼠标向上事件 下一篇浏览器页面中选定文本的坐标