bootstrap-select插件实现下拉框菜单多选，搜索，全选等

第一次写博客

第一篇博客，从这里开始！

契机

本人刚接触php，在实习公司上班，做网站维护，网站使用php写的，tp架构。在做一个功能的时候，需要将数据库查询出的多条数据在下拉框中显示，并提供多选。

开始

1.在html文件中引入jQuery和bootstrap插件，然后再加入bootstrap-select插件。

<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>

<link rel="stylesheet" href="__BOOTSTRAP__/bootstrap-3.3.7/dist/css/bootstrap.min.css"/>
<script src="__BOOTSTRAP__/bootstrap-3.3.7/dist/js/bootstrap.min.js"></script>

<link rel="stylesheet" href="__BOOTSTRAP__/bootstrap-select/dist/css/bootstrap-select.min.css"/>
<script src="__BOOTSTRAP__/bootstrap-select/dist/js/bootstrap-select.min.js"></script>

（1）jquery.min.js要放在所有js之前，否则会报错
（2）然后加入bootstrap的js和css，可以从bootstrap中文网下载源码包，也可以直接写入

（3）最后加入关键的bootstrap-select插件，可以百度下载，这里提供一个git地址https://github.com/silviomoreto/bootstrap-select，同样加入js和css，也可以写入

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/css/bootstrap-select.min.css">
 <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/js/bootstrap-select.min.js"></script>

2.html代码

		<div class="form-controls">
			<select class="selectpicker show-tick form-control" multiple size="8" title="默认文字" 
					data-selected-text-format="count > 20"
					data-live-search="true" data-live-search-placeholder="搜索" 
					data-style="btn-primary" data-actions-box="true"
					id="xinghao_id" name="xinghao_id" value="{$info.xinghao_id}">
				<option value="1" ><i></i>oppo1</option>
				<option value="2" ><i></i>oppo2</option>
				<option value="3" ><i></i>vivo1</option>
				<option value="4" ><i></i>vivo2</option>
				<option value="5" ><i></i>huawei1</option>
				<option value="6" ><i></i>huawei2</option>
				<option value="7" ><i></i>iphone1</option>
				<option value="8" ><i></i>iphone2</option>
			</select>
			<input type="button" value="确定" "fun()"/>
		</div>

效果：

3.在div标签中加入属性增加效果
（1）加入多选：multiple

（2）搜索：data-live-search="true"
data-live-search-placeholder="搜索"

（3）全选/全不选：data-actions-box="true"

（4）设置最多选中数量：data-max-options="2"
（5）限定选中框显示数量：data-selected-text-format="count > 3"

（6）显示框颜色：

data-style="btn-primary"
data-style="btn-info"
data-style="btn-success"
data-style="btn-warning"
data-style="btn-danger"

结语

欢迎大家讨论指正。