插件下载地址: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