如何正确的使用Bootstrap、Dual和Listbox插件-创新互联

这期内容当中小编将会给大家带来有关如何正确的使用Bootstrap、Dual和Listbox插件，文章内容丰富且以专业的角度为大家分析和叙述，阅读完这篇文章希望大家可以有所收获。

基本使用

需要用到的JS和CSS文件位于项目代码下的dist目录中，需要将这个目录中的对应文件放入你的项目里，这一步不赘述

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

1.加载duallistbox插件

  GroupA
  GroupB
  GroupC
  GroupD
  GroupE
  GroupF
  GroupG

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('ops-coffee.cn');
selectorx.bootstrapDualListbox('refresh');

上述就是小编为大家分享的如何正确的使用Bootstrap、Dual和Listbox插件了，如果刚好有类似的疑惑，不妨参照上述分析进行理解。如果想知道更多相关知识，欢迎关注创新互联成都网站设计公司行业资讯频道。

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。