首页 > 其他 > 详细

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

时间:2017-08-24 13:17:35      阅读:352      评论:0      收藏:0      [点我收藏+]

下载插件

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

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

 

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

原文:http://www.cnblogs.com/xinghan/p/7422344.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!