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

我有jQuery,但我不确定它是否有任何内置的排序助手.我可以让每个项目的一个二维数组text,value和selected属性,但我不认为JavaScript的内置Array.sort()将正常工作.

1> Mark..：

---

将选项提取到临时数组中,排序,然后重建列表:

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);
});

---

此外,它不会保留所有浏览器中当前所选的选项(Chrome记住所选的内容,但是firefox,即没有,并且在选项被读取后选择了最后一个元素).要解决此问题,请在排序前保存当前选定的值,然后重新选择.即,在其他任何事情之前做`var selected = $("#my_select").val();`然后在附加已排序的选项后,恢复val,即`$("#my_select").val(选中) );`

---

请注意,这是区分大小写的 - 也就是说,它会在以小写字母开头的内容之前对以大写字母开头的所有内容进行排序.如果这是不合需要的,只需在每个`.text`之后添加一个`.toUpperCase()`

---

@Mark,请用TJ Ellis评论更新你的答案.

---

凉.'else'字样可以删除.无论如何,返回结束功能.

2> JaredC..：

---

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

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

3> Tom Maeckelb..：

---

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

4> Tom Pietrosa..：

---

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

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

5> travis..：

---

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

---

请注意,此函数不会对**选项**元素进行排序; 它会更改现有元素上的*[value,text,selected]*,以便对它们进行排序(在本例中为值).这对于大多数应用程序来说已经足够了,但是如果你有其他属性(CSS,工具提示等),那么这种方法是不够的.

6> bdukes..：

---

有一个封闭的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; 
    });
}

希望能帮助到你!