背景

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')})