前端插件之Bootstrap Dual Listbox使用教程

<!-- 加载bootstrap -->
<script src="/UploadFiles/2021-04-02/jquery-3.2.1.slim.min.js">

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: '列表为空',
});


以上配置都比较简单，对照中文就能知晓意思，不做过多解释，另外有几个支持的参数说明如下：
infoText： 除了设置字符串外还可设置为false，当设置为false时可隐藏这段信息
showFilterInputs： 默认为true，是否显示filter过滤框
moveOnSelect： 默认为true，点击便会变更选项到对应的选择框内，如果设置为false则会在出现moveSelected的箭头需要点击箭头或者双击选项后才能变更选项到对应的选择框
nonSelectedFilter： 未选中的默认过滤规则，可以配置为OPS-COFFEE-A则未选中的框内只会显示OPS-COFFEE-A
selectedFilter： 已选中的默认规则，与noSelectedFilter类似
使用进阶
获取已选择的值
selectorx.val()
获取select插件对象
selectorx.bootstrapDualListbox('getContainer')
刷新插件元素用户界面
selectorx.bootstrapDualListbox('refresh');
删除bootstrap-duallistbox插件，恢复select原样
selectorx.bootstrapDualListbox('destroy');
动态添加select的option


selectorx.append('<option value="9" selected>ops-coffee.cn</option>');
selectorx.bootstrapDualListbox('refresh');


注意：上文中的所有selectorx都为加载duallistbox时实例化的select对象
完整Demo
为了方便大家学习，我写了个完整的demo，你可以在线查看效果或下载代码应用到自己的项目中
在线Demo地址：https://demo.ops-coffee.cn/duallistbox/
Github源码地址：https://github.com/ops-coffee/demo/tree/master/duallistbox


总结
以上所述是小编给大家介绍的前端插件之Bootstrap Dual Listbox使用教程,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！