按值排序Html选择选项的最有效方法是什么,同时保留当前选定的项目？

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的排序文档(特别是compareFunction)和Wikipedia的排序算法页面是相关的.

如果要使排序大小写不敏感,请替换text为text.toLowerCase()

上面显示的sort函数说明了如何排序.准确地对非英语语言进行排序可能很复杂(参见unicode排序算法).在sort函数中使用localeCompare是一个很好的解决方案,例如:

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

Answer 2

稍微修改了汤姆的答案,以便它实际修改要排序的选择框的内容,而不是仅返回已排序的元素.

$('#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);
}

Answer 3

我刚刚在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;
}

Answer 4

我在给@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();

这仍然可以改进,但我不需要添加更多的铃声或口哨:)

Answer 5

好吧,在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中的方法可以选择我缺少的选项,或者这是最好的方法吗？

Answer 6

有一个封闭的jQuery票证应该可以使用,但只是没有包含在核心中.

jQuery.fn.sort = function() {
  return this.pushStack( [].sort.apply( this, arguments ), []);
};

从Google Groups线程引用,我认为您只是传入一个用于排序的函数,就像这样

function sortSelect(selectToSort) {
    jQuery(selectToSort.options).sort(function(a,b){ 
        return a.value > b.value ? 1 : -1; 
    });
}

希望能帮助到你!