按值对 Html Select 选项进行排序,同时保留当前所选项目的最有效方法是什么?
-
09-06-2019 - |
题
我有 jQuery,但我不确定它是否有任何内置的排序助手。我可以制作每个项目的二维数组 text
, value
, , 和 selected
属性,但我不认为 javascript 是内置的 Array.sort()
会正常工作。
解决方案
将选项提取到临时数组中,排序,然后重建列表:
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 的排序文档 (特别是比较函数)和 维基百科的排序算法页面 是相关的。
如果您想让排序不区分大小写,请替换 text
和 text.toLowerCase()
上面显示的排序函数说明了如何排序。准确地对非英语语言进行排序可能很复杂(请参阅 unicode 校对算法)。使用 语言环境比较 在排序函数中是一个很好的解决方案,例如:
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);
}
我刚刚将 Mark 的想法封装在 jquery 函数中
$('#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();
这仍然可以改进,但我不需要添加任何更多的花哨:)
有 已关闭的 jQuery 票证 对于一种应该可以工作的类型,但只是没有包含在核心中。
jQuery.fn.sort = function() {
return this.pushStack( [].sort.apply( this, arguments ), []);
};
参考自 Google 网上论坛话题, ,我认为你只需传入一个用于排序的函数,就像这样
function sortSelect(selectToSort) {
jQuery(selectToSort.options).sort(function(a,b){
return a.value > b.value ? 1 : -1;
});
}
希望能帮助到你!
嗯,在 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 中是否有某种内置方法可以对我缺少的选择进行排序,或者这是最好的方法?
这是一个更好的解决方案。向 JQuery 声明一个全局函数
$.fn.sortSelect = function() {
var op = this.children("option");
op.sort(function(a, b) {
return a.text > b.text ? 1 : -1;
})
return this.empty().append(op);
}
并从代码中调用该函数。
$("#my_select").sortSelect();
Array.sort()
默认将每个元素转换为字符串,并比较这些值。所以 ["value", "text", "selected"]
被排序为 "value, text, selected"
. 。大多数时候这可能会很好地工作。
如果您确实想单独对值进行排序,或者将值解释为数字,那么您可以将比较函数传递给 sort():
arrOptions.sort(function(a,b) { return new Number(a[0]) - new Number(b[0]); });
记住:如果你想使用上下文选择器,仅仅连接ID是不行的
$.fn.sort_select_box = function(){
var my_options = $("option", $(this));
my_options.sort(function(a,b) {
if (a.text > b.text) return 1;
else if (a.text < b.text) return -1;
else return 0
});
$(this).empty().append(my_options);
}
// Usando:
$("select#ProdutoFornecedorId", $($context)).sort_select_box();