<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. С этим придется вам повозиться.
