按值对 Html Select 选项进行排序，同时保留当前所选项目的最有效方法是什么？

StackOverflow https://stackoverflow.com/questions/45888

题

我有 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();
许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top