根据价值对Html Select的选项进行排序,同时保留当前选定的项目的最有效方法是什么?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (67)

我有jQuery,但我不确定它是否有任何内置的排序助手。我可以让每个项目的一个二维数组textvalueselected属性,但我不认为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的排序文档(特别是compareFunction)和Wikipedia的排序算法页面是相关的。

如果你想的那种不区分大小写,替换texttext.toLowerCase()

上面显示的排序功能说明了如何排序。准确地排列非英语语言可能很复杂(请参阅unicode归类算法)。在排序函数中使用localeCompare是一个很好的解决方案,例如:

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

扫码关注云+社区

领取腾讯云代金券