1因为这是一个基于bootstrap的插件 所以需要引入如下文件：
<link rel="stylesheet" href="css/bootstrap.min.css"> <link rel="stylesheet" href="css/bootstrap-select.css"> <script src="js/jquery.js"></script> <script src="js/bootstrap.min.js"></script> <script src="js/bootstrap-select.js"></script>
注意：bootstrap-select文件 要在bootstrap后面引入
没有文件的 可以再这里下载 网盘：链接: https://pan.baidu.com/s/1eTIFdQU 密码: c7ui
html代码：
<div class="col-sm-6 col-sm-offset-3" style="margin-top: 200px;"> <div class="row"> <label class="col-sm-3 control-label" style="line-height: 34px;margin-bottom: 20px;">选择用户：</label> <div class="col-sm-6"> <select id="select" name="select" class="selectpicker show-tick form-control" multiple data-live-search="true" data-actions-box="true"> <option value="苹果">苹果</option> <option value="菠萝">菠萝</option> <option value="香蕉">香蕉</option> <option value="火龙果">火龙果</option> <option value="梨子">梨子</option> <option value="草莓">草莓</option> <option value="哈密瓜">哈密瓜</option> <option value="椰子">椰子</option> <option value="猕猴桃">猕猴桃</option> <option value="桃子">桃子</option> </select> </div> </div> </div>
js代码：
$(window).on('load', function () {
$('.selectpicker').selectpicker();
});
这样就可以了 效果是这样的 ：
这是英文的 如果想要中文的 只需要引入一个js：
<script src="js/defaults-zh_CN.min.js"></script>
在我上面的网盘文件里 都有 加了之后 效果是这样的：
现在咱们说一下 select标签 上的类和属性的作用：
1、show-tick 会在你选择的每个选项后面 打一个 对号
2、form-control 就是bootstrap的样式 没什么用
3、属性 multiple 毫无疑问 就是多选的意思
4、属性 data-live-search=”true” 一看到search 没错 就是下面那个搜索框
5、属性 data-actions-box=”true” 全选，取消全选
以上这几个类和属性添加就有 不加就没有。
* 获取选中的值 更简单：
$("#select").val();
如果你想动态渲染select 我写了一段js：
// res是从后端返回的数据
var res = { account_arr:[ '苹果', '柿子', '香蕉', '橙子', '草莓', '桃子', '菠萝', '火龙果'] } var str = ""; //res.account_arr是你从接口接收到的那个数组 for (var i = 0; i < res.account_arr.length; i++){ str += '<option value="'+ res.account_arr[i] +'">'+ res.account_arr[i] +'</option>' } $(".selectpicker").html(str); $('.selectpicker').selectpicker('refresh');//动态刷新
帮一个朋友弄得 只用到了这些 基本上可以满足一般的需求，需要更多的话，请看 http://silviomoreto.github.io/bootstrap-select/
原创文章，作者：ItWorker，如若转载，请注明出处：https://blog.ytso.com/16877.html