Select2 how to keep select'a order?

Question

JavaScript

Connected to the Yii2 project Select2 .
There is a field with the ability to select multiple items. Each of the elements has its own ID, for example:
1 => A
2 => B
3 => C.

If I select C first, and then A, then in the input field it will be in alphabetical order (A, C). And I need to keep the selection order. How to do it? Thank you.

Answer 1

<select id="jq-select2" name="select" multiple="multiple">
    <option value="1">A</option>
    <option value="2">B</option>
    <option value="3">C</option>
    <option value="4">D</option>
</select>

var $select = $('#jq-select2');
// Индекс сортировки
var sortIndex = 0;

var select2Instance = $select.select2({
    // Явно определяем сортировку элементов в dropdown, иначе сортировка,
    // которая отрабатывает в обработчике события selecting, будет
    // переопределят и вывод и в dropdown. Чтоб понять о чем речь
    // можно закомментить данную опцию.
    sorter: function (data) {
        return data.sort(function (a, b) {
            if (Number(a.id) > Number(b.id)) return 1;
            else if (Number(a.id) < Number(b.id)) return -1;
            return 0;
        });
    }
}).data().select2;

// Событие когда выбрали элемен в dropdown (перед вставкой в select2)
select2Instance.on('selecting', function (e) {
    // Увеличиваем индекс сортировки и привайваем ноде
    // в виде нового свойства объекта (лучше в dataset запихать)
    e.args.data.element.sortIndex = ++sortIndex;

    // Получвем все option из select`а
    var $options = $select.find('option');

    // Сортируем все option`ы по индексу сортировки
    $options.sort(function (a, b) {
        if (~~a.sortIndex > ~~b.sortIndex) return 1;
        else if (~~a.sortIndex < ~~b.sortIndex) return -1;
        return 0;
    });

    // Очищаем select от option`ов и аппендим отсортированные
    $select.empty().append($options);
});

Here's what happened after an hour of stupidity. The only bug appears, when an element is deleted, a dropdown appears. You will have to fiddle with this.

Answer 2

//Сохранение последовательности выбора
$('#id_select2').on('select2:select', function(e){
    var id = e.params.data.id;
    var option = $(e.target).children('[value="'+id+'"]');
    option.detach();
    $(e.target).append(option).change();
});

Link to github issue

For Yii2 optional

1) Сохранять данные проще через yii2-save-relations-behavior
2) В модели поправить relation чтобы сохранял последовательность при получении из базы