我有 jQuery，但我不确定它是否有任何内置的排序助手。我可以为每个项目的text、value和selected属性制作一个二维数组，但我认为内置的 javascriptArray.sort()不会正常工作。
按值对 Html Select 的选项进行排序，同时保留当前所选项目的最有效方法是什么？
IT技术
javascript
jquery
arrays
sorting
html-select
2021-01-19 08:09:57
6个回答
将选项提取到一个临时数组中，排序，然后重建列表：
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 的排序文档（特别是 compareFunction）和维基百科的排序算法页面是相关的。
如果您想让排序不区分大小写，请替换text为text.toLowerCase()
上面显示的排序函数说明了如何排序。准确地对非英语语言进行排序可能很复杂（请参阅unicode collation algorithm）。在 sort 函数中使用localeCompare是一个很好的解决方案，例如：
my_options.sort(function(a,b) {
return a.text.localeCompare(b.text);
});
稍微修改了上面汤姆的答案，以便它实际上修改要排序的选择框的内容，而不仅仅是返回已排序的元素。
$('#your_select_box').sort_select_box();
jQuery 函数：
$.fn.sort_select_box = function(){
// Get options from select box
var my_options = $("#" + this.attr('id') + ' option');
// sort alphabetically
my_options.sort(function(a,b) {
if (a.text > b.text) return 1;
else if (a.text < b.text) return -1;
else return 0
})
//replace with sorted my_options;
$(this).empty().append( my_options );
// clearing any selections
$("#"+this.attr('id')+" option").attr('selected', false);
}
我刚刚在 jquery 函数中包装了 Mark 的想法
$('#your_select_box').sort_select_box();
jQuery 函数：
$.fn.sort_select_box = function(){
var my_options = $("#" + this.attr('id') + ' option');
my_options.sort(function(a,b) {
if (a.text > b.text) return 1;
else if (a.text < b.text) return -1;
else return 0
})
return my_options;
}
我在对@Juan Perez 的评论中提到的解决方案
$.fn.sortOptions = function(){
$(this).each(function(){
var op = $(this).children("option");
op.sort(function(a, b) {
return a.text > b.text ? 1 : -1;
})
return $(this).empty().append(op);
});
}
用法：
$("select").sortOptions();
这仍然可以改进，但我不需要添加更多的花里胡哨:)
好吧，在 IE6 中，它似乎对嵌套数组的 [0] 项进行排序：
function sortSelect(selectToSort) {
var arrOptions = [];
for (var i = 0; i < selectToSort.options.length; i++) {
arrOptions[i] = [];
arrOptions[i][0] = selectToSort.options[i].value;
arrOptions[i][1] = selectToSort.options[i].text;
arrOptions[i][2] = selectToSort.options[i].selected;
}
arrOptions.sort();
for (var i = 0; i < selectToSort.options.length; i++) {
selectToSort.options[i].value = arrOptions[i][0];
selectToSort.options[i].text = arrOptions[i][1];
selectToSort.options[i].selected = arrOptions[i][2];
}
}
我会看看这是否适用于其他浏览器...
编辑：它也适用于 Firefox，哇哦！
还有比这更简单的方法吗？是否有一些内置于 javascript 或 jQuery 的方法可以对我缺少的选择进行排序，或者这是最好的方法？