在保留当前所选项目的同时,按值对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);
});