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);

其餘配置項和方法 能夠查看官網