How to make a Select2 4.0 sortable?

问题

I had this problem with the new version 4.0, and wasn't able to find any answer, until I myself solved with a work around after some hours of work.

回答1:

My workaround solution:

First, make it sortable with jquery.

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

The function orderSortedValues has the following idea: Change the order of the options of the original select input, and notifying select2 about the new order.

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

Finally, it will also be necessary to stop the automatic sorting with selecting a new value through the dropdown

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: the scope of the functions are global. You may change it... Hope to help someone else.

回答2:

I had a problem with the dropdown choices changing when the original select list was rearranged.

So what I ended up doing is to create a hidden field.

This field gets updated when the select changes.

<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">

Then I updated the JS to update the field whenever a sort happens or when a new item is selected.

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

来源：https://stackoverflow.com/questions/35561999/how-to-make-a-select2-4-0-sortable

标签

jquery

jquery-select2-4

select2