如何使 Select2 4.0 可排序？

Question

我在使用新版本 4.0 时遇到了这个问题，并且找不到任何答案，直到我自己在工作了几个小时后解决了这个问题。

Answer 1

我的解决方案：

首先，使其可排序 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);
};

最后，还需要停止自动排序，select通过下拉菜单输入新值

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：函数的作用域是全局的。你可能会改变它......希望能帮助别人。

Answer 2

我在重新排列原始 select 列表时更改下拉选项时遇到问题。

所以我最后做的是创建一个隐藏字段。

此字段会在 select 更改时更新。

<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，以便在发生排序或 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();
});

如何使 Select2 4.0 可排序？

How to make a Select2 4.0 sortable?

jquery

jquery-select2-4

select2