jquery bootstrap-select多选组件使用指南

Bootstrap-select是一个基于bootstrap主题，jquery库的开源多选组件，官网地址：https://developer.snapappointments.com/bootstrap-select/，官网比较详细的介绍了bootstrap-select的上手指南、可选项配置、案例和api使用。既然官网已经有比较翔实的参考资料，为什么还多此一举写本文，主要有2点：
1）官网有点神经质，经常访问不了；
2）做个总结，便于以后查看。

1、快速上手

引入2个核心文件即可：
1）bootstrap-select.css或其压缩文件.min.css;
2）bootstrap-select.js或其压缩文件.min.js;
3）多语言要求的话，请再引入语言包js
除此之外，必要的jquery,bootstrap库也要引入，大家可以下载到本地，也可以使用cdn资源，本文使用的是bootcss cdn资源，具体参考文本提供的DEMO。

bootstrap-select使用很简单，通常就2种方式：
通过添加selectpicker类来实现，如下：

<select class="selectpicker"><option>Mustard</option><option>Ketchup</option><option>Barbecue</option>
</select>

通过js代码显性初始化

$(function () {$('.my-select').selectpicker();     // 初始化特定select$('select').selectpicker();         // 初始化所有select
});

2、bootstrap-select常用选项列表

本文只列出常用的核心选项，其它更多选项大家参考：https://developer.snapappointments.com/bootstrap-select/options/

Name	Type	Default	Description
actionsBox	boolean	false	是否显示2个按钮: 选中全部和取消选中全部 (Select All & Deselect All).
deselectAllText	string	‘Deselect All’	选中全部文本描述, actionsBox = true才生效.
selectAllText	string	‘Select All’	选中全部文本描述, actionsBox = true才生效.
dropdownAlignRight	boolean or ‘auto’	false	下拉框对齐方式，默认左对齐，设为true则右对齐
liveSearch	boolean	false	是否出现搜索框，默认没有.
noneSelectedText	string	‘Nothing selected’	多选模式下，没选中项显示文本
noneResultsText	string	‘No results matched {0}’	没找到匹配项显示文本.
maxOptions	integer or false	false	多选模式下，最多选中项.如果设置到optgroup则表示该分组最多选中项
maxOptionsText	string or array or function	function	超出最多选中项的显示文本.
showTick	boolean	false	选中项后面是否显示对勾√
size	‘auto’ integer false	‘auto’	下拉列表显示几项，auto组件会根据可见区域高度自动调整，false则显示全部，intger数字则显示设置的数字项，多余下拉滚动.

选项如何设置？
1）通过data-*来设置，如：actionsBox，可设置成data-actions-box，具体参考本文DEMO

<select class="selectpicker" multiple data-actions-box="true" data-deselect-all-text = '取消选中' data-select-all-text='选中全部'><option>Mustard</option><option>Ketchup</option><option>Relish</option>
</select>

2）通过js来初始化

$("#bs-select3").selectpicker({liveSearch: true, noneResultsText: "没找到相应记录{0}"});

3、bootstrap-select提供的常用api方法列表

1）.selectpicker(‘val’)，取值和赋值

取值：.selectpicker(‘val’)
取值也可以通过$(selector).val()获取

赋值：.selectpicker(‘val’, 值)

$('.selectpicker').selectpicker('val', 'Mustard');     //单选赋值
$('.selectpicker').selectpicker('val', ['Mustard','Relish']);   //多选赋值

2）.selectpicker(‘selectAll’)，多选模式选中全部

$('.selectpicker').selectpicker('selectAll');

3）.selectpicker(‘deselectAll’)，多选模式取消选中全部

$('.selectpicker').selectpicker('deselectAll');

4）.selectpicker(‘render’)，重新渲染

You can force a re-render of the bootstrap-select ui with the render method. This is useful if you programatically change any underlying values that affect the layout of the element.

$(’.selectpicker’).selectpicker(‘render’);

5）.selectpicker(‘refresh’)，刷新

当bs-select新增、移除option，修改option selected，或bs-select enable／disable时，需要调用刷新方法。

$('.selectpicker').selectpicker('refresh');

6）下拉显示、隐藏

.selectpicker(‘toggle’)
.selectpicker(‘hide’)
.selectpicker(‘show’)

7）.selectpicker(‘destroy’) 组件销毁

4、本文DEMO，复制另存html即可使用

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8" /><title>BootStrap-Select</title><link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" /><link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/4.5.0/css/font-awesome.min.css" /><link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap-select/1.13.6/css/bootstrap-select.css" /><script src="https://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script><script src="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script><script src="https://cdn.bootcss.com/bootstrap-select/1.13.6/js/bootstrap-select.js"></script>
</head>
<body>
<div class="page-content container"><div class='page-body'><div class='panel panel-default'><div class="panel-heading"><h3 class='panel-title'>使用selectpicker类</h3></div><table class='table table-bordered'><thead><tr><th width=35>No.</th><th width="70%">描述</th><th width="30%">选择框</th></tr></thead><tbody><tr><td>1</td><td>普通标准单选框</td><td><select class="selectpicker"><option>Mustard</option><option>Ketchup</option><option>Relish</option></select></td></tr><tr><td>2</td><td>带下拉分组optgroup, 选中项显示对勾</td><td><select class="selectpicker" data-show-tick="true"><optgroup label="Picnic"><option>Mustard</option><option>Ketchup</option><option>Relish</option></optgroup><optgroup label="Camping"><option>Tent</option><option>Flashlight</option><option>Toilet Paper</option></optgroup></select></td></tr><tr><td>3</td><td>多选，设置noneSelectedText为'--请选择--'</td><td><select class="selectpicker" data-none-selected-text="--请选择--" multiple><option>Hot Dog, Fries and a Soda</option><option>Burger, Shake and a Smile</option><option>Sugar, Spice and all things nice</option></select></td></tr><tr><td>4</td><td>多选，设置下拉框右对齐，最多可选2项</td><td><select class="selectpicker" multiple data-max-options="2" data-dropdown-align-right = "true"><option>Hot Dog, Fries and a Soda</option><option>Burger, Shake and a Smile</option><option>Sugar, Spice and all things nice</option></select></td></tr><tr><td>5</td><td>多选，显示选中全部和取消选中按钮，并设置英文文本为中文</td><td><select class="selectpicker" multiple data-actions-box="true" data-deselect-all-text = '取消选中' data-select-all-text='选中全部'><option>Mustard</option><option>Ketchup</option><option>Relish</option></select></td></tr><tr><td>6</td><td>多选，显示搜索框，可通过option data-tokens="ketchup mustard"来指定搜索关键字</td><td><select class="selectpicker"  multiple data-live-search="true" data-none-results-text="没找到相应记录{0}"><option data-tokens="ketchup mustard">Hot Dog, Fries and a Soda</option><option data-tokens="mustard">Burger, Shake and a Smile</option><option data-tokens="frosting">Sugar, Spice and all things nice</option></select></td></tr>                                                                          </tbody></table></div><div class="panel panel-default"><div class="panel-heading"><h3 class='panel-title'>使用js来初始化</h3></div><table class='table table-bordered'><thead><tr><th width=35>No.</th><th width="70%">描述</th><th width="30%">选择框</th></tr></thead><tbody><tr><td>1</td><td>普通标准单选框 <button class='btn btn-sm btn-primary' type='button' onclick='make1()'>初始化</button></td><td><select class="form-control input-sm" id="bs-select1"><option>Mustard</option><option>Ketchup</option><option>Relish</option></select></td></tr><tr><td>2</td><td>带下拉分组optgroup, 选中项显示对勾 <button class='btn btn-sm btn-primary' type='button' onclick='make2()'>初始化</button></td><td><select class="form-control input-sm" id="bs-select2"><optgroup label="Picnic"><option>Mustard</option><option>Ketchup</option><option>Relish</option></optgroup><optgroup label="Camping"><option>Tent</option><option>Flashlight</option><option>Toilet Paper</option></optgroup></select></td></tr><tr><td>3</td><td>多选，显示搜索框，可通过option data-tokens="ketchup mustard"来指定搜索关键字 <button class='btn btn-sm btn-primary' type='button' onclick='make3()'>初始化</button></td><td><select class="form-control input-sm" size=1 multiple id="bs-select3"><option data-tokens="ketchup mustard">Hot Dog, Fries and a Soda</option><option data-tokens="mustard">Burger, Shake and a Smile</option><option data-tokens="frosting">Sugar, Spice and all things nice</option></select></td></tr>                                                                          </tbody></table></div><div class="panel panel-default"><div class="panel-heading"><h3 class='panel-title'>API方法列表</h3></div><table class='table table-bordered'><thead><tr><th width=35>No.</th><th width="70%">描述</th><th width="30%">选择框</th></tr></thead><tbody><tr><td>1</td><td>单选框取值、赋值 <button class='btn btn-sm btn-primary' type='button' onclick='getval1()'>取值</button><button class='btn btn-sm btn-primary' type='button' onclick='setval1()'>赋值</button></td><td><select class="form-control input-sm selectpicker" id="api-select1"><option>Mustard</option><option>Ketchup</option><option>Relish</option></select></td></tr><tr><td>2</td><td>多选框取值、赋值 <button class='btn btn-sm btn-primary' type='button' onclick='getval2()'>取值</button><button class='btn btn-sm btn-primary' type='button' onclick='setval2()'>赋值</button></td><td><select class="form-control input-sm selectpicker" multiple id="api-select2"><option>Mustard</option><option>Ketchup</option><option>Relish</option><option>Marcus</option><option>Lmlxj</option></select></td></tr>                <tr><td>3</td><td>删除option,render和refresh比较, option增|删|selected改变需要调用refresh才生效 <button class='btn btn-sm btn-primary' type='button' onclick='del3()'>删除option</button><button class='btn btn-sm btn-primary' type='button' onclick='render3()'>render</button><button class='btn btn-sm btn-primary' type='button' onclick='refresh3()'>refresh</button></td><td><select class="selectpicker form-control input-sm" id="api-select3"><optgroup label="Picnic"><option value="Mustard">Mustard</option><option value="Ketchup">Ketchup</option><option value="Relish">Relish</option></optgroup><optgroup label="Camping"><option value="Tent">Tent</option><option value="Flashlight">Flashlight</option><option value="Toilet Paper">Toilet Paper</option></optgroup></select></td></tr></tbody></table></div> </div>
</div>
<script type="text/javascript">function make1() {$("#bs-select1").selectpicker();}function make2() {$("#bs-select2").selectpicker({showTick: true});}function make3() {$("#bs-select3").selectpicker({liveSearch: true, noneResultsText: "没找到相应记录{0}"});}function getval1() {alert('selectpicker("val"): ' + $("#api-select1").selectpicker('val'));alert('$("#api-select1").val(): ' + $("#api-select1").val());}function setval1() {$("#api-select1").selectpicker('val', 'Ketchup');// 或 $("#api-select1").val('Ketchup').selectpicker('refresh');}function getval2() {alert('selectpicker("val"): ' + $("#api-select2").selectpicker('val'));alert('$("#api-select1").val(): ' + $("#api-select2").val());}function setval2() {$("#api-select2").selectpicker('val', ['Ketchup','Marcus']);// $("#api-select2").val(['Ketchup','Marcus']).selectpicker('refresh');}function del3() {$('#api-select3').find('[value=Ketchup]').remove();}function render3() {$('#api-select3').selectpicker('render');}function refresh3() {$('#api-select3').selectpicker('refresh');}
</script>
</body>
</html>