在保留当前所选项目的同时,按值对Html Select的选项进行排序的最有效方法是什么?
时间:2020-03-05 18:48:15 来源:igfitidea点击:
我有jQuery,但不确定是否有内置的排序助手。我可以为每个项目的"文本","值"和"选定的"属性制作一个二维数组,但是我不认为Array.sort()内置的javascript可以正常工作。
解决方案
回答
好吧,在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中的方法对我所缺少的选择进行排序,或者这是最好的方法?
回答
Array.sort()默认将每个元素转换为字符串,然后比较这些值。因此,[[" value"," text"," selected"]被排序为
" value,text,selected"`。在大多数情况下,这可能会很好地工作。
如果确实要对值进行排序,或者将值解释为数字,则可以将比较函数传递给sort():
arrOptions.sort(function(a,b) { return new Number(a[0]) - new Number(b[0]); });
回答
有一种应该可用的封闭式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; }); }
希望能帮助到你!
回答
将选项提取到一个临时数组中,进行排序,然后重建列表:
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)和Wikipedia的"排序算法"页面相关。
如果要使排序不区分大小写,请用text.toLowerCase()
替换text
。
上面显示的排序功能说明了如何进行排序。准确地对非英语语言进行排序可能很复杂(请参见Unicode排序规则算法)。在sort函数中使用localeCompare是一个很好的解决方案,例如:
my_options.sort(function(a,b) { return a.text.localeCompare(b.text); });