人设生成器网站,网站建设与维护 计算机,样式表一般用于大型网站,建设集团公司网站背景
Bootstrap Dual Listbox是一款基于Bootstrap的双向select选择框控件#xff0c;作为对multiple select的扩展#xff0c;使用起来非常简单#xff0c;功能也更强大。
参考文章一
参考文章二 使用效果如下图所示#xff1a; 初始化HTML代码#xff1a; div cla…背景
Bootstrap Dual Listbox是一款基于Bootstrap的双向select选择框控件作为对multiple select的扩展使用起来非常简单功能也更强大。
参考文章一
参考文章二 使用效果如下图所示 初始化HTML代码 div classform-horizontaldiv classform-groupdiv classcol-md-12select multiplemultiple namegroups size10option value1GroupA/optionoption selected value2GroupB/optionoption value3GroupC/optionoption value4GroupD/optionoption selected value5GroupE/optionoption value6GroupF/optionoption value7GroupG/option/select/div/div/div 初始化JS代码 var selectorx;selectorx $(select[namegroups]).bootstrapDualListbox({bootstrap3Compatible: true,//设置为Bootstrap3模式preserveSelectionOnMove: moved,//选中移动背景变色moveOnSelect: false,//选中即选择nonSelectedListLabel: 全部部门权限,selectedListLabel: 已有部门权限,filterTextClear: 展示所有,filterPlaceHolder: 过滤搜索,moveSelectedLabel: 添加,moveAllLabel: 添加所有,removeSelectedLabel: 移除,removeAllLabel: 移除所有,infoText: 共{0}个数据,infoTextFiltered: 搜索到{0}个数据 ,共{1}个数据,infoTextEmpty: 列表为空,});
其他常用方法 // 获取选中的值$(#get).click(function () {console.log(selectorx.bootstrapDualListbox(getContainer));alert(selectorx.val());})动态添加值$(#add).click(function () {selectorx.append(option value9 selectedops-coffee.cn/option);selectorx.bootstrapDualListbox(refresh);})刷新至初始状态$(#refresh).click(function () {$(#duallistbox).trigger(reset);selectorx.bootstrapDualListbox(refresh);})销毁duallistbox插件$(#destroy).click(function () {selectorx.bootstrapDualListbox(destroy)})
