xinghan

下载插件

插件地址: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);

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

 

分类:

技术点:

相关文章: