【问题标题】:Sort by name in Select2在 Select2 中按名称排序
【发布时间】:2016-01-14 11:18:40
【问题描述】:

有什么方法可以按名称对 select2 生成的列表进行排序?我有一些代码:

var dataUser = [{
    "id": "5",
    "text": "BTest"
}, {
    "id": "2",
    "text": "ATest"
}, {
    "id": "8",
    "text": "CTest"
}, {
    "id": "13",
    "text": "DTest"
}];


$("#mylist").select2({
    data: dataUser,
    templateResult: function(data) {
        return data.text;
    },
    sorter: function(data) {    
        return data.sort();
    }
});

http://jsfiddle.net/oe9retsL/4/

此列表按 id 排序,但我想按文本排序。

【问题讨论】:

    标签: javascript jquery jquery-select2 select2


    【解决方案1】:

    您需要向sort() 提供一个函数,其中包含比较数组中每个对象的text 属性的逻辑。试试这个:

    sorter: function(data) {
        return data.sort(function(a, b) {
            return a.text < b.text ? -1 : a.text > b.text ? 1 : 0;
        });
    }
    

    Updated fiddle

    要对选择的选项进行排序,您需要在选择选项时很好地在标签上实现类似的逻辑,如下所示:

    $("#mylist").select2({
        data: dataUser,
        templateResult: function(data) {
            return data.text;
        },
        sorter: function(data) {
            return data.sort(function(a, b) {
                return a.text < b.text ? -1 : a.text > b.text ? 1 : 0;
            });
        }
    }).on("select2:select", function (e) { 
        $('.select2-selection__rendered li.select2-selection__choice').sort(function(a, b) {
            return $(a).text() < $(b).text() ? -1 : $(a).text() > $(b).text() ? 1 : 0;
        }).prependTo('.select2-selection__rendered');
    });
    

    Updated fiddle

    【讨论】:

    • 是的,效果很好,但是有没有办法对已经选择的选项进行排序?
    • 哇,很棒的快速解决方案! :) 谢谢@Rory McCrossan!
    • 没问题,很乐意提供帮助。
    • 给你:jsfiddle.net/RoryMcCrossan/oe9retsL/8。您需要在处理程序中使用this 引用来找到与select 密切相关的标签。
    • 您需要将两个值都转换为相同的大小写以消除区分大小写:jsfiddle.net/oe9retsL/11
    猜你喜欢
    • 1970-01-01
    • 2013-07-21
    • 2018-03-26
    • 1970-01-01
    • 1970-01-01
    • 2011-09-19
    • 1970-01-01
    • 1970-01-01
    • 2014-09-19
    相关资源
    最近更新 更多