背景

Bootstrap Dual Listbox是一款基于Bootstrap的双向select选择框控件，作为对multiple select的扩展，使用起来非常简单，功能也更强大。

参考文章一

参考文章二

使用效果如下图所示：

初始化HTML代码：

    <div class="form-horizontal"><div class="form-group"><div class="col-md-12"><select multiple="multiple" name="groups" size="10"><option value="1">GroupA</option><option selected value="2">GroupB</option><option value="3">GroupC</option><option value="4">GroupD</option><option selected value="5">GroupE</option><option value="6">GroupF</option><option value="7">GroupG</option></select></div></div></div>

初始化JS代码：

        var selectorx;selectorx = $('select[name="groups"]').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 value="9" selected>ops-coffee.cn</option>');selectorx.bootstrapDualListbox('refresh');})刷新至初始状态$('#refresh').click(function () {$('#duallistbox').trigger('reset');selectorx.bootstrapDualListbox('refresh');})销毁duallistbox插件$('#destroy').click(function () {selectorx.bootstrapDualListbox('destroy')})

前端插件——Bootstrap Dual Listbox 简介相关推荐

【博学谷学习记录】超强总结,用心分享丨前端开发:BootStrap框架基础用法
BootStrap 1.BootStrap简介 Bootstrap 是由 Twitter 公司开发维护的前端 UI 框架,它提供了大量编写好的 CSS 样式,允许开发者结合一定HTML 结构及Java ...
前端插件clipboard 操作剪切板
本期介绍一个非常常用的前端插件 Clipboard.js,Clipboard.js 实现了纯 JavaScript (无 Flash)的浏览器内容复制到系统剪贴板的功能. 1.clipboard.js ...
前端自动化构建-为什么使用前端自动化构建以及gulp简介
前端自动化构建-为什么使用前端自动化构建以及gulp简介一开始接触到这个东西,真的是不知道是什么样的一个概念,所以也在网上看了一一些资料,理解一下. 1. 前端开发存在的问题开发慢 (1) 项目架 ...
Web前端：Bootstrap最强总结附详细代码（带常用案例！）
Web前端基础: Web前端:HTML最强总结附详细代码 Web前端:CSS最强总结附详细代码 Web前端:JavaScript最强总结附详细代码 Web前端工具: Web前端: JQuery最 ...
【Web前端第二阶段--Bootstrap】Day05
[Web前端第二阶段–Bootstrap]Day05 第一章 [Web前端第二阶段–Html]Day01 第二章 [Web前端第二阶段–Html]Day02 第三章 [Web前端第二阶段–CSS]Da ...
django框架——sweetalert前端插件、序列化组件、批量数据操作、分页器、Forms组件（上）
系列文章目录第一章 django安装与介绍第二章 django基础使用第三章路由层第四章虚拟环境.django版本区别.视图层第五章模板层第六章模型层(上) 第七章模型层(下) ...
06.前端之BootStrap
iconfont的使用:https://www.cnblogs.com/changxin7/p/11479216.html Bootstrap介绍 Bootstrap是Twitter开源的基于HTML ...
最火的前端开发框架Bootstrap使用教程学习！
Bootstrap,来自Twitter,是目前很受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷. 它由Twitter的 ...
excel可视化图表插件_Axure 教程：利用图表前端插件实现高级可视化图表
如何通过图标前端插件完成高级可视化图表?笔者在此给出了详细教程,与大家分享~~ 后台开发中避免不了实现一些可视化的图表,主要制作的方法有四种:Excel表格截图.Axure图形绘制.Axure网页框架 ...

前端插件——Bootstrap Dual Listbox 简介

背景

前端插件——Bootstrap Dual Listbox 简介相关推荐

最新文章

热门文章