javascript - 按值对 Html Select 的选项进行排序的最有效方法是什么，同时保留当前选定的项目？

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's sort documentation (特别是 compareFunction)和 Wikipedia's Sorting Algorithm page是相关的。

如果您想让排序不区分大小写，请将 text 替换为 text.toLowerCase()

上面显示的排序函数说明了如何排序。准确地对非英语语言进行排序可能很复杂(请参阅 unicode collation algorithm)。使用localeCompare在排序功能中是一个很好的解决方案，例如:

my_options.sort(function(a,b) {
    return a.text.localeCompare(b.text);
});