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="width: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);

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