如何使 Select2 4.0 可排序？答案

【问题标题】：How to make a Select2 4.0 sortable?如何使 Select2 4.0 可排序？
【发布时间】：2016-02-22 19:18:23
【问题描述】：

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

【问题讨论】：

【解决方案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);
};

最后，还需要通过下拉菜单选择新值来停止自动排序

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：函数的范围是全局的。您可以更改它...希望对其他人有所帮助。

【讨论】：

我对这个解决方案的问题是它还会改变下拉菜单中出现的选项的顺序。但它有效。

【解决方案2】：

当重新排列原始选择列表时，我遇到了下拉选项更改的问题。

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

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

然后我更新了 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();
});

【讨论】：