對于很多非專業前端開發來說寫頁面是非常痛苦的，借助框架或插件往往能夠達到事半功倍的效果，本系列文章會介紹我在運維系統開發過程中用到的那些順手的前端插件，如果你是想寫XX管理系統的學生、或是需要獨自做Dashboard的后端工程師、亦或是像我這樣半吊子的開發加運維，那么這個系列的文章你一定不要錯過

Bootstrap Dual Listbox是一款基于Bootstrap的雙向select選擇框控件，作為對multiple select的擴展，使用起來非常簡單，功能也更強大

項目Github地址：https://github.com/istvan-ujjmeszaros/bootstrap-duallistbox

基本使用

需要用到的JS和CSS文件位于項目代碼下的dist目錄中，需要將這個目錄中的對應文件放入你的項目里，這一步不贅述

1.引入CSS/JS文件，由于bootstrap-duallistbox是基于bootstrap的，所以要先引入bootstrap相關的css和js

<!-- 加載bootstrap --><script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script><link rel="stylesheet" >     <!-- 加載bootstrap-dualllistbox --><link rel="stylesheet" href="static/bootstrap-duallistbox/bootstrap-duallistbox.css" rel="external nofollow" ><script src="static/bootstrap-duallistbox/jquery.bootstrap-duallistbox.js"></script>

1.加載duallistbox插件

<select class="form-control" 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><script>  var selectorx = $('select[name="groups"]').bootstrapDualListbox();</script>

1.完成以上兩步可以看到頁面效果如下

非常簡單，到這里已經可以正常使用這個控件了，更多的花樣接著往下看

配置說明

整個界面為英文顯示，有默認提示，如果你想將提示改為中文或添加自定義的提示內容，那么可以通過如下配置

var selectorx = $('select[name="groups"]').bootstrapDualListbox({  nonSelectedListLabel: '未選擇的組',  selectedListLabel: '已選擇的組',  filterTextClear: '展示所有',  filterPlaceHolder: '過濾搜索',  moveSelectedLabel: "添加",  moveAllLabel: '添加所有',  removeSelectedLabel: "移除",  removeAllLabel: '移除所有',  infoText: '共{0}個組',  infoTextFiltered: '搜索到{0}個組 ,共{1}個組',  infoTextEmpty: '列表為空',});