select2多选框无法手动排序问题[转载]

原文链接：https://my.oschina.net/sumweb/blog/1593892

在一个项目中，我使用了它的AJAX搜索和选择，但发现一个问题，项目需要对选择的内容保留它添加时相应的排序，比如one/two/three，AJAX添加选择的时候如果是three,two,one，我希望它保留这个顺序，然后提交到后台数据库，而select2在已经选过内容的情况下，是按原来内容顺序做排序的，这就导致无法修改排序。百度后，没有找到解决办法，GOOGLE搜索关键词“select2 multiple sort”，找到了很多关于这个问题的材料，以及一些相关的问题：

https://github.com/select2/select2/issues/3106，这个资料，讨论了比较多，其中有人放了它的处理代码，链接是http://jsbin.com/cizehajema/2/edit?html,js,output，代码是：

$("select").select2({
  tags: true //这个参数的效果应该是，自定义内容选项卡
});

$("select").on("select2:select", function (evt) {
  var element = evt.params.data.element;
  var $element = $(element);
  
  window.setTimeout(function () {  
  if ($("select").find(":selected").length > 1) {
    var $second = $("select").find(":selected").eq(-2);
    
    $element.detach();
    $second.after($element);
  } else {
    $element.detach();
    $("select").prepend($element);
  }
  
  $("select").trigger("change");
  }, 1);
});

$("select").on("select2:unselect", function (evt) {
  if ($("select").find(":selected").length) {
    var element = evt.params.data.element;
    var $element = $(element);
   $
   ("select").find(":selected").after($element); 
  }
});

经过测试这一段代码，对没有使用AJAX获取选项数据的，即固定的option条目，它能解决问题。

后来又找到了更为简洁的代码，如下：

$("select").on("select2:select", function (evt) {
  var element = evt.params.data.element;
  var $element = $(element);
  
  $element.detach();
  $(this).append($element);
  $(this).trigger("change");
});

即重写了它的select2:select事件，处理完后，触发change事件。
上面的代码都能解决固定的option条目，但对于AJAX，出现了另外的错误情况。后来通过对HTML的查看发现，select2会把AJAX选择的项，会在select标签中生成option，但在去掉某个选项时，它并没有删除这个option，OK，那就对上面的select2:unselect事件做下修改，代码如下：

$("select").on("select2:unselect", function (evt) {
    var element = evt.params.data.element;
    var $element = $(element);
    $element.remove();
});

测试后，问题得到解决。

反思下，select2这里默认这样来处理，应该是在固定的选项内容时，不能删除select标签中option，去读一下它的unselect事件，可能可以找到对应的参数来修改这样的处理方式，时间关系，先暂停在此。欢迎留言探讨指正。

相似的问题：

修改排序：https://stackoverflow.com/questions/34788259/sort-by-name-in-select2

总结：

在初始化select2以后，在项目后面添加下面这两段，将 #select换为对应的domid即可解决问题

$("#select").on("select2:select", function (evt) {
  var element = evt.params.data.element;
  var $element = $(element);
  $element.detach();
  $(this).append($element);
  $(this).trigger("change");
});
$("#select").on("select2:unselect", function (evt) {
    var element = evt.params.data.element;
    var $element = $(element);
    $element.remove();
});