bootstrap-select多选下拉列表插件使用小记

下载插件

插件地址：http://silviomoreto.github.io/bootstrap-select/

下载好后引用css和js文件

<!-- 因为是jquery插件,所以引用前先引用jquery-->
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<!-- bootstrap-->
<link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
<script type="text/javascript" src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- 插件css样式 -->
<link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/bootstrap-select/1.12.4/css/bootstrap-select.min.css"/>
<!-- 插件js -->
<script type="text/javascript" src="https://cdn.bootcss.com/bootstrap-select/1.12.4/js/bootstrap-select.min.js"></script>
<!-- 插件语言 默认是英文 这里引用插件自带的中文js文件 -->
<script src="https://cdn.bootcss.com/bootstrap-select/1.12.4/js/i18n/defaults-zh_CN.min.js"></script>

使用方法

<div style="500px;height:500px;margin:0 auto">
    <!-- 这里要使用 multiple="multiple" 来开启多选模式  -->
    <select id="selectbox" name="selectbox[]" multiple="multiple" class="form-control">
        <option value="1">option1</option>
        <option value="2">option2</option>
        <option value="3">option3</option>
        <option value="4">option4</option>
        <option value="5">option5</option>
        <option value="6">option6</option>
    </select>
</div>
<script>
$(function(){
    $('#selectbox').selectpicker({
      style: 'btn-info',    //列表框样式 这里使用的bootstrap的
      size: 4    //列表项显示数量
    });
})

设置默认选中方法

//单个选项选中
$('#selectbox').selectpicker('val', '1');
//多个选项选中
$('#selectbox').selectpicker('val', ['1','2','3']);
//如果是后端拉取的字符串数据可以用js分割成数组
var str="2,3,5";
var arr=str.split(',');
$('#selectbox').selectpicker('val', arr);

其他配置项和方法 可以查看官网