标签：select 变更 input boot font 设置 规则 pdu src
下载
bootstrap-duallistbox：https://www.virtuosoft.eu/code/bootstrap-duallistbox/
使用：（bootstrap和jquery自己去官网下载）
<link rel="stylesheet" href="./css/bootstrap.min.css" />
<link rel="stylesheet" href="./css/bootstrap-duallistbox.min.css" />
<script src="./js/jquery-3.1.1.min.js"></script>
<script src="./js/bootstrap.min.js"></script>
<script src="./js/jquery.bootstrap-duallistbox.min.js"></script>
html
<div class="container">
<div class="col-sm-12">
<select multiple="multiple" name="duallistbox_demo1[]" id="duallist">
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
<option value="option4">Option 4</option>
<option value="option5">Option 5</option>
<option value="option6">Option 6</option>
<option value="option7">Option 7</option>
<option value="option8">Option 8</option>
<option value="option9">Option 9</option>
<option value="option0">Option 10</option>
</select>
</div>
</div>
按照官网在js部分添加
<script type="text/javascript">
var demo1 = $(‘select[name="duallistbox_demo1[]"]‘).bootstrapDualListbox();
</script>
此时你就可以打开网页进行查看
<script type="text/javascript"> var demo1 = $(‘select[name="duallistbox_demo1[]"]‘).bootstrapDualListbox({ nonSelectedListLabel: ‘未选择的权限‘, selectedListLabel: ‘已选择的权限‘, 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‘);
更多配置参考官网：https://www.virtuosoft.eu/code/bootstrap-duallistbox/
标签：select 变更 input boot font 设置 规则 pdu src
原文地址：https://www.cnblogs.com/HByang/p/13177421.html
