插件下载地址：https://download.csdn.net/download/l1994m/10919972
样式如图：
导入 jquery.js
bootstrap.js
doublebox-bootstrap.js
导入 bootstrap.css
doublebox-bootstrap.css
利用的js代码：
var doublefox;$(function() {var realNameCode;var selectedLabelList;$.ajax({ url:\"大众../uniset/labelList\"大众, async:false, type:\"大众post\"大众, dataType : \"大众json\公众, contentType:\"大众application/json\公众, success: function (data) { realNameCode = JSON.parse(data); // JOSN.parse(data)；将 字符串换转成JSON工具 }, error:function(data){ console.log(\"大众弹窗标签所有列表获取非常\"大众); }});//获取选择列表$.ajax({ url:\"大众../uniset/dynWordsList\"大众, async:false, type:\"大众post\"大众, dataType : \公众json\公众, contentType:\公众application/json\"大众, success: function (data) { selectedLabelList = data; //由于返回本来便是Json工具无需进行转换 }, error:function(data){ console.log(\"大众已选择标签列表获取非常\"大众); }}); doublefox = $('.labelSelect').doublebox({ nonSelectedListLabel: '可展示基本信息字段', //左边栏lableName selectedListLabel: '已展示基本信息字段', //右边栏lableName preserveSelectionOnMove: 'moved', moveOnSelect: false, nonSelectedList:realNameCode, //左边栏列表 selectedList:selectedLabelList, //右边栏已选择列表 optionValue:\公众fieldCode\"大众, //option的选项值 optionText:\"大众memo\"大众, // option的文本值 doubleMove:true, //掌握全部选择和移除的显示 });});
在利用过程中，对付插件源码进行修正，犹豫源码是压缩格式，将源码Js复制到notapade++中格式化查看
需求1：右边至多选择9个标签，也便是当选择第10个时进行弹出提示；进行全部选择时，左侧下拉数量大于9或者右侧已经9个时，进行提示。
办理：如果对付选择数量进行显示，须要改动的便是每次选择时触发的函数，对其进行已选择数量判断，查看源码找到对应方法 move，moveAll。
需求2：哀求对付鼠标移动上去是中文提示，源码是中文提示；
通过对源码查看：该部分通过这里赋值，因此只要修正源码中对付按钮的提示就好
修正如下
需求3：对付全部移除要进行警告提示操作，
红框中的代码是原来的代码，在表面加了一层警告判断
效果如图：
下面列出了干系修正布局用到的id，方便利用，css文件中或者jsp中直接添加，修正相应的布局
.bootstrap-duallistbox-container .settingUp-btns{ float: left; margin-left: 20px; position:relative;}/掌握整体select的宽度/.col-md-5{width: 32%;}/掌握多选框左边/.box1{ margin-left: 80px; padding-left:40px;}/多选框中间样式/.btn-box{ margin-left: 25px;}/掌握右半部分select/.box2{ padding-left:40px;}/掌握两个下拉高度/select.labelSelect{ height: 144px;}
至此所有用到的都进行相识释，希望有所帮助
版权声明：本文为原创文章，转载请注明本页地址。
本人博客连接：https://blog.csdn.net/l1994m/article/details/81709767
