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

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

TreeView的复选框隐藏重新整理
CheckBoxes 为真代码如下 using System.Runtime.InteropServices; #region 树的复选框隐藏private const int TVIF_STATE ...
多选框向后台传值，多选框的回显，对多选框的各种操作
1.多选框的回显: js:$( function(){ var checkBoxAll =$("input[name^='checkbox_']");//获取前缀为 ...
DEV控件中GridView中的复选框与CheckBox实现联动的全选功能
最初的界面图如图1-1(全选框ID: cb_checkall DEV控件名称:gcCon ): 要实现的功能如下图(1-2 1-3 1-4)及代码所示: 图1-2 图1-3 图1-4 O(∩_∩ ...
Element表格嵌入复选框以及单选框
1,element 表格嵌入CheckBox 效果图如下: 2,element结合checkBox实现单选效果如下: html代码: <template><div><p ...
GridControl 选择列、复选框全选（上）
说明: GirdControl 中加入一列,这一列不是写在数据库中的,而是代码中加入的. 图示: 底层类代码: #region GridControl 全选/// <summary>/// ...
个人永久性免费-Excel催化剂功能第58波-批量生成单选复选框
插件的最大威力莫过于可以把简单重复的事情批量完全,对日常数据采集或打印报表排版过程中,弄个单选.复选框和用户交互,美观的同时,也能保证到数据采集的准确性,一般来说用原生的方式插入单选.复选框,操作繁琐 ...
iOS复选框——高雅的BEMCheckBox
GitHub地址:BEMCheckBox star:1800+ BEMCheckBox 是一个开源库,可以轻松地为iOS创建漂亮,高度可定制的,有动画效果的复选框. 要求需要 iOS 7或更高版本, ...
单选框、复选框、下拉列表
单选框 radio (只能一个被选中) <span>性别</span> 男<input name="gender" type="radio ...
MFC控件编程之复选框单选框分组框
MFC控件编程之复选框单选框分组框一丶分组框分组框英文叫做 GroubBox 添加了分组框主要就是分组.好看.不重点介绍二丶单选框英文: Raido Button 单选框需要注意的事项 1. ...
html 复选框 mysql_Html：实现带复选框的下拉框（一）
概述项目中要用到可多选的下拉框(select),发现HTML中无此控件,故手动模拟实现一下. 模拟所用元素:input,ul,li 代码模拟实现带复选框的下拉列表 body{ margin: 20 ...

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

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

最新文章

热门文章