背景

Bootstrap Dual Listbox是一款基于Bootstrap的雙向select選擇框控件，作為對(duì)multiple select的擴(kuò)展，使用起來非常簡單，功能也更強(qiáng)大。

參考文章一

參考文章二

---

使用效果如下圖所示：

?

---

初始化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,//設(shè)置為Bootstrap3模式preserveSelectionOnMove: 'moved',//選中移動(dòng)背景變色moveOnSelect: false,//選中即選擇nonSelectedListLabel: '全部部門權(quán)限',selectedListLabel: '已有部門權(quán)限',filterTextClear: '展示所有',filterPlaceHolder: '過濾搜索',moveSelectedLabel: "添加",moveAllLabel: '添加所有',removeSelectedLabel: "移除",removeAllLabel: '移除所有',infoText: '共{0}個(gè)數(shù)據(jù)',infoTextFiltered: '搜索到{0}個(gè)數(shù)據(jù) ,共{1}個(gè)數(shù)據(jù)',infoTextEmpty: '列表為空',});

其他常用方法：

// 獲取選中的值$('#get').click(function () {console.log(selectorx.bootstrapDualListbox('getContainer'));alert(selectorx.val());})動(dòng)態(tài)添加值$('#add').click(function () {selectorx.append('<option value="9" selected>ops-coffee.cn</option>');selectorx.bootstrapDualListbox('refresh');})刷新至初始狀態(tài)$('#refresh').click(function () {$('#duallistbox').trigger('reset');selectorx.bootstrapDualListbox('refresh');})銷毀duallistbox插件$('#destroy').click(function () {selectorx.bootstrapDualListbox('destroy')})

?

?

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

總結(jié)

以上是生活随笔為你收集整理的前端插件——Bootstrap Dual Listbox 简介的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。