Question

Select2（v3.5.1）具有拖放功能，但只有“输入”字段。我需要一个值/文本组合，所以只有一个选择框才是我正确的选择。

我在这里找到了解决问题的（部分）解决方案：http://joevanderjagt.com/better-multiple-select-with-sorting/

但是，它有一个错误。如果用户只添加标签而不进行排序，它可以正常使用排序标签。我创建了一个jsfiddle：http://jsfiddle.net/s8v3su36/

<select id="test" size="1" multiple="multiple" style="width:400px">
    <option value="a">AAA</option>
    <option value="b">BBB</option>
    <option value="c">CCC</option>    
</select>

(function($){
    $.fn.extend({
        select2_sortable: function(){
            var select = $(this);
            $(select).select2();
            var ul = $(select).prev('.select2-container').first('ul');
            ul.sortable({
                placeholder : 'ui-state-highlight',
                forcePlaceholderSize: true,
                items       : 'li:not(.select2-search-field)',
                tolerance   : 'pointer',
                stop: function() {
                    $($(ul).find('.select2-search-choice').get().reverse()).each(function() {
                        var id = $(this).data('select2Data').id;
                        var option = select.find('option[value="' + id + '"]')[0];
                        $(select).prepend(option);
                    });
                }
            });
        }
    });

    $('#test').select2_sortable();
}(jQuery));

首先添加“CCC”，然后添加“BBB”并按下调试按钮。你会看到订单 “AAA，BBB，CCC”但必须是“CCC，BBB，AAA”

现在使用拖放“BBB”作为第一个条目。再次单击调试按钮，看到正确的顺序“BBB，CCC，AAA”。

有人可以帮忙吗？我希望添加一个条目也是在select中对选项进行排序。：）

可能的解决方案：http://jsfiddle.net/s8v3su36/4/

Answer 1

您的魔术调试按钮只输出<select>个孩子，当您首次加载页面或向select2 div添加选项时，这些子项保持不变。

只有停止拖动后，才会执行stop功能并重新排列<option>标记。

尝试重新排序<select>活动的add。

Answer 2

添加了：

$(select).on("change", function(e)
{
    if (e.added)
    {
        var select = $(this);
        var ul = $(select).prev('.select2-container').first('ul');
        $($(ul).find('.select2-search-choice').get().reverse()).each(function() {
            var id = $(this).data('select2Data').id;
            var option = select.find('option[value="' + id + '"]')[0];
            $(select).prepend(option);
        });
    }
});

Answer 3

使用vue.js - 请考虑使用此组件（在页面上紧凑，即使使用很长的选项列表也很舒服）：

https://www.npmjs.com/package/vue-libs-multi-select-with-order

Answer 4

我重写了（@ambroiseRabier）中的代码。我的代码更干净，不要使用$（ul）.find查找选定的选项。相反，它使用传递的ui元素来查找所选选项和需要更新的原始select元素。如果您的网页中有更多Select2实例，则此版本可以正常工作。

(function ($) {
$.fn.select2Sortable = function () {
    this.next().children().children().children().sortable({
        containment: 'parent', stop: function (event, ui) {
            var originalSelectElement = ui.item.parent().parent().parent().parent().prev();
            ui.item.parent().children('[title]').each(function () {
                var title = $(this).attr('title');
                var originalOptionElem = $(originalSelectElement).children('[value="' + title + '"]');
                originalOptionElem.detach();
                $(originalSelectElement).append(originalOptionElem)
            });
            $(originalSelectElement).change();
        }
    });
};
})(jQuery);

使用拖放排序选择2

4 个答案: