Select2 как сохранить порядок select'a?

Question

[alex stephen]

Подключил к Yii2 проекту Select2.
Есть поле с возможностью выбрать несколько элементов. У каждого из элементов есть свой ID, например:
1 => A
2 => B
3 => C.

Если я выбираю сначала C, а затем A, то в поле ввода оно будет по алфавиту (A,C). А мне нужно сохранить порядок выбора. Как это сделать? Спасибо.

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

Вот, что получилось после часа тупника. Единственное появляется один баг, при удаление элемента появлется dropdown. С этим придется вам повозиться.

Answer 2

[sokollondon]

//Сохранение последовательности выбора
$('#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();
});

Ссылка на github issue

Для Yii2 дополнительно

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