Как сделать Select2 4.0 сортируемым?

Мое обходное решение:

Во-первых, сделайте его сортируемым с помощью jquery.

$("#mySelect").parent().find("ul.select2-selection__rendered").sortable({
    containment: 'parent',
    update: function() {
        orderSortedValues();
    }
});

Функция orderSortedValues ​​имеет следующую идею: изменить порядок параметров исходного ввода select и уведомить select2 о новом порядке.

orderSortedPassageValues = function() {
    $("#mySelect").parent().find("ul.select2-selection__rendered").children("li[title]").each(function(i, obj){
        var element = $("#mySelect").children("option[value="+obj.title+"]");
        moveElementToEndOfParent(element)
    });
};

moveElementToEndOfParent = function(element) {
    var parent = element.parent();

    element.detach();

    parent.append(element);
};

Наконец, также необходимо будет остановить автоматическую сортировку с выбором нового значения через выпадающий список.

stopAutomaticOrdering = function() {    
    $("#mySelect").on("select2:select", function (evt) {
        var id = evt.params.data.id;

        var element = $(this).children("option[value="+id+"]");

        moveElementToEndOfParent(element);

        $(this).trigger("change");
    });
}

PS: объем функций глобальный. Вы можете изменить это... Надеюсь помочь кому-то еще.

У меня возникла проблема с изменением выпадающего списка при изменении исходного списка выбора.

Итак, что я сделал, так это создал скрытое поле.

Это поле обновляется при изменении выбора.

<select class="select2field" name="FieldSelect" data-select2target="field-hiddenfield" multiple="">

  <option value="1">A</option>

  <option value="2">B</option>

  <option value="3">C</option>

</select>

<input type="hidden" name="FieldData" value="" class="hidden" id="field-hiddenfield">

Затем я обновил JS, чтобы обновлять поле всякий раз, когда происходит сортировка или когда выбирается новый элемент.

var select2field = 'select.select2field';
$(select2field).select2({
  templateSelection: function (data, container) {
    // Add custom attributes to the <option> tag for the selected option
    var element = $(data.element);
    element.attr('data-content', element.html());
    return data.text;
  },
  closeOnSelect: false,
  multiple: true,
  placeholder: 'Select..',
  width: '100%'
});

var origSelect = $('#mySelect');
var select2Select = $("#mySelect").parent().find("ul.select2-selection__rendered");

function updateHiddenField() {
  var values = [];

  select2Select.children("li[title]").each(function(i, obj){

    values.push(origSelect.children("option[data-content='"+obj.title+"']").attr('value'));

  });

  // Update the hidden field.
  $('#' + origSelect.data('select2target')).val(values.join(','));
}

select2Select.sortable({
  containment: 'parent',
  update: function() {
    updateHiddenField();
  }
});

origSelect.on("select2:select", function (evt) {
  var id = evt.params.data.id;
  var element = $(this).children("option[value="+id+"]");
  element.detach();
  origSelect.append(element);
  $(this).trigger("change");

  updateHiddenField();
});