Select2：如何在 Select2 中获得自定义排序答案

【问题标题】：Select2 : How to get custom sort in Select2Select2：如何在 Select2 中获得自定义排序
【发布时间】：2017-08-13 18:35:31
【问题描述】：

我有一个用户可以选择的选择字段，并且我正在使用 Select2 进行多项选择。

<select id="currency" name="currency_cc">
    <option value="BDT">BDT - Bangladesh</option>
    <option value="USD">USD - USA</option>
    <option value="ZWL">ZWL - Zimbabwe</option>
</select>

但问题是，如果我从列表中选择选项 2，然后选择选项 1，然后 select2 将选项 1 val 放在选项 2 之前，但我先选择了选项 2。

我希望将选项 1 放在选项 2 之后，因为我按此顺序选择了，我该怎么做？我认为官方文档中没有任何内容。

但我在 JS Fiddle 中看到了这个工作，我从以下 Q/A 页面获得： jQuery select2 control - retrieve last selected element

而小提琴是： http://jsfiddle.net/jEADR/1588/

检查一下，它可以按我想要的方式工作，但在我的代码中却没有这样的行为。

请有人帮忙。

【问题讨论】：

它也在删除已选择的元素，这不是我想要的方式，这就是我没有考虑的原因。

标签： javascript html select jquery-select2

【解决方案1】：

我设法使它与以下代码一起工作，（我从其他地方收集它，不再记得从哪里）

    var $select2 = $('#currency-converter-currencies').select2({
            templateSelection: template,
            width: '100%'
        }).val({!! $setting->convert_currencies !!}).trigger('change');

    // cache order of initial values
    var defaults = $select2.select2('data');
    defaults.forEach(function (obj) {
        var order = $select2.data('preserved-order') || [];
        order[order.length] = obj.text;
        $select2.data('preserved-order', order);
    });

    function select2_renderSelections($select2) {
        var order = $select2.data('preserved-order') || [];
        var $container = $select2.next('.select2-container');
        var $tags = $container.find('li.select2-selection__choice');
        var $input = $tags.last().next();

        // apply tag order
        order.forEach(function (val) {
            var $el = $tags.filter(function (i, tag) {
                return $(tag).data('data').id === val;
            });
            $input.before($el);
        });
    }

    function selectionHandler(e) {
        var $select2 = $(this);
        var val = e.params.data.id;
        var order = $select2.data('preserved-order') || [];

        switch (e.type) {
            case 'select2:select':
                order[order.length] = val;
                break;
            case 'select2:unselect':
                var found_index = order.indexOf(val);
                if (found_index >= 0) order.splice(found_index, 1);
                break;
        }
        $select2.data('preserved-order', order); // store it for later
        select2_renderSelections($select2);
    }

    $select2.on('select2:select select2:unselect', selectionHandler);



    /**
     * Put select option's value instead on text in select box
     * @param data
     * @param container
     */
    function template(data, container) {
        return data.id;
    }

在这里，我们使用“模板”函数将原始 Select2 值替换为过滤后的值。

这不应该是永久修复，由于它的编程方式，将其视为临时修复。

希望这将在未来对其他人有所帮助

【讨论】：