Bootstrap-duallistbox基本使用

插件下载：官网 github
下面为Bootstrap-duallistbox的配置项：

var demo2 = $('.demo2').bootstrapDualListbox({
  nonSelectedListLabel: 'Non-selected',//未选中list的label，默认false；
  selectedListLabel: 'Selected',//已选中list的label，默认false；
  showFilterInputs: true,//是否显示过滤的input输入框，默认true显示；为false则过滤相关的内容不起作用、不显示；
  filterTextClear: '清空过滤条件',//清空过滤条件按钮的文本，默认'show all'，可替换为其他文本；
  filterPlaceHolder: '过滤条件',//过滤条件input框的placeholder，可自定义内容，默认为'Filter',
  nonSelectedFilter: 'ion ([7-9]|[1][0-2])',//未选中option的过滤条件，默认为空字符串 '' ，也可用正则方式，例如：'ion ([7-9]|[1][0-2])' 过滤7、8、9、10、11、12；
  selectedFilter: '3',//已选中option的过滤条件，默认为空字符串 ''；参考：nonSelectedFilter；一般不设置已选中的过滤条件，会导致某些选中的项不在已选中option的过滤条件范围内，无法显示；
  moveOnSelect: false,//是否移动选中的option；为false时，moveSelected和removeSelected的按钮显示、生效；默认为true；为true只能光标连续选取，松开鼠标，选中的项会移动；为false则可配合键盘的Ctrl和Shift使用，点击moveSelectedLabel和removeSelectedLabel的按钮，option才会移动；
  moveAllLabel: '添加全部option',//添加全部option按钮的label，默认'Move all'
  moveSelectedLabel: '添加选中的option',//添加选中option按钮的label，默认'Move selected'
  removeAllLabel: '移除全部option',//移除全部option按钮的label，默认'Remove all'
  removeSelectedLabel: '移除选中option',//移除选中option按钮的label，默认'Remove selected'
  preserveSelectionOnMove: 'moved',//'moved'或'all'时，展示移动到target列表中的元素（背景色显示），默认false，不展示；没看到'moved'和'all'的区别；
  helperSelectNamePostfix: '_ast',//为selector的name的后缀为'_helper'，未选中的list后面拼接1，已选中的拼接2；也可通过setHelperSelectNamePostfix(value, refresh)方法修改；
  selectorMinimalHeight: 260,//selector的最小height，大概小于260px时，为默认值固定高度，更大值则selector高度会增大；不知道默认值的的大小及height的单位
  infoText: '选中/未选中option共 {0} 项',//不过滤时，选中/未选中option共几项；默认为'Showing all {0}'；
  infoTextFiltered: '从 {1} 项 筛选 {0} 项',//过滤信息，默认'<span class="label label-warning">Filtered</span> {0} from {1}'。从m项中筛选n项；
  infoTextEmpty: 'Empty list',//当筛选条件为 '' ，且选中/未选中列表无option时显示的内容；默认为'Empty list'；
  filterOnValues: false,//暂时不知具体作用
});

官网settings配置，自己经测试写了中文注释；可参考上面配置进行测试。

filterOnValues和preserveSelectionOnMove具体作用没弄明白，望各位不吝赐教。

方法的调用只是换一种方式动态处理settings的内容，具体方法可参考官方文档；

var demo2 = $('.demo2').bootstrapDualListbox();
//设置refresh为true，立即刷新
$('.demo2').bootstrapDualListbox('setFilterPlaceHolder','过滤玩玩' ,true);
//注意与上面的区别
demo2.bootstrapDualListbox('setMoveOnSelect', false, true);
demo2.bootstrapDualListbox('setMoveSelectedLabel', '添加选中的option');
demo2.bootstrapDualListbox('setRemoveSelectedLabel', '移除选中的option');

感觉方法这么调用怪怪的，不太会js勿怪。

ajax动态调用：在另一篇 Bootstrap-duallistbox动态获取数据

注：其js在function formatString(s, args) {}内有个console.log();没注释
将插件改为双树：https://www.cnblogs.com/liuhua4451/p/5056995.html