背景

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 简介的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。