1.组件开源地址以及API说明
2.使用前提
引入bootstrap-select,既然是bootstrap-select,组件肯定是依赖bootstrap的,而bootstrap又是依赖jquery的,所以使用组件必须引用如下文件。
<script type="text/javascript" src="/js/jquery-1.9.1.min.js"></script>
<link rel="stylesheet" href="/css/bootstrap.min.css" >
<link rel="stylesheet" href="/css/bootstrap-select.min.css" >
<script src="/js/bootstrap.min.js" ></script>
<script src="/js/bootstrap-select.min.js" ></script>
<script src="js/i18n/defaults-zh_CN.min.js"></script> <!-- defaults-zh_CN.min.js 非必需-->
3.select使用
3.1单选
<!--基本使用-->
<select class="selectpicker">
<option value="1">A</option>
<option value="2">B</option>
<option value="3">C</option>
<option value="4">D</option>
<option value="5">E</option>
</select>
<!--分组单选-->
<select class="selectpicker">
<optgroup label="Picnic">
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
</optgroup>
<optgroup label="Camping">
<option>Tent</option>
<option>Flashlight</option>
<option>Toilet Paper</option>
</optgroup>
</select>
3.2多选框
相比于单选框加入了一个
multiple
标签。
<select class="selectpicker" multiple>
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
</select>
3.3模糊查询
添加一个data-live-search=”true”的属性。
<select class="selectpicker" data-live-search="true">
<option>Hot Dog</option>
<option>Fries</option>
<option>Soda</option>
<option>Burger</option>
<option>Shake</option>
<option>Smile</option>
</select>
3.4多选限制
添加属性
data-max-options="2"
或者在初始化时用
maxOptionsText
做限制。
<select class="selectpicker" multiple data-max-options="2">
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
</select>
或者在初始化selectpicker时设置maxOptionsText
$('.selectpicker').selectpicker({
'selectedText':'cat',
'maxOptionsText':2;
})
3.5自定义按钮文本
通过属性
title
来控制。
- 选择框文本
<select class="selectpicker" multiple title="请选择一个">
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
</select>
- 选择显示单条文本 意思就是选中相应的option,就展示option的title,比如选中”Burger, Shake and a Smile”,文本框内显示Combo 2。
<select class="selectpicker">
<option title="Combo 1">Hot Dog, Fries and a Soda</option>
<option title="Combo 2">Burger, Shake and a Smile</option>
<option title="Combo 3">Sugar, Spice and all things nice</option>
</select>
3.6多选框格式化选择文本
通过属性 data-selected-text-format 来控制选中的值的显示 可选的值有如下4个:
-
values
: 逗号分隔的选定值列表(系统默认); -
count
: 如果选择了一个项,则显示选项值。如果选择多于一个,则显示所选项的数量,如选择2个,则下拉框显示2个已被选中; -
count > x
: 当count的值小于x时,展示逗号分隔的选定值列表;当count>x时,显示x个被选中; -
static
:无论选中什么,都只展示默认的选中文本。
下面给几个简单示例:
<select class="selectpicker" multiple data-selected-text-format="count">
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
<option>Onions</option>
</select>
<select class="selectpicker" multiple data-selected-text-format="count>3">
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
<option>Onions</option>
</select>
3.6样式选择
-
按钮样式 通过
data-style
来设置按钮的样式
<select class="selectpicker" data-style="btn-primary">
...
</select>
<select class="selectpicker" data-style="btn-info">
...
</select>
<select class="selectpicker" data-style="btn-success">
...
</select>
<select class="selectpicker" data-style="btn-warning">
...
</select>
<select class="selectpicker" data-style="btn-danger">
...
</select>
-
单选框样式 这里要注意一下,单选框默认是没有多选框的选中之后的”√”图标的,如果想要加上这个图标的话,需要在样式中加入
show-tick
即可
<select class="selectpicker show-tick">
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
</select>
- style样式自定义 bootstrap-select的样式不是死的,可以自定义style样式,类似最基本的css样式添加。
.special {
font-weight: bold !important;
color: #fff !important;
background: #bc0000 !important;
text-transform: uppercase;
}
<select class="selectpicker">
<option>Mustard</option>
<option class="special">Ketchup</option>
<option style="background: #5cb85c; color: #fff;">Relish</option>
</select>
-
宽度
引用bootstrap的样式
<div class="row">
<div class="col-xs-3">
<div class="form-group">
<select class="selectpicker form-control">
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
</select>
</div>
</div>
</div>
使用data-width属性,来定义宽度,可选的值有以下4个
auto:select的宽度由option中内容宽度最宽的哪个决定;
fit:select的宽度由实际选中的option的宽度决定;
100px:select的宽度定义为100px;
50%:select的宽度设置为父容器宽度的50%
<select class="selectpicker" data-width="auto">
<option>cow</option>
<option>bullaaaaaaaaaaaa</option>
<option>ASD</option>
<option>Bla</option>
<option>Ble</option>
</select>
<select class="selectpicker" data-width="fit">
<option>cow</option>
<option>bullaaaaaaaaaaaa</option>
<option>ASD</option>
<option>Bla</option>
<option>Ble</option>
</select>
<select class="selectpicker" data-width="100px">
<option>cow</option>
<option>bull</option>
<option>ASD</option>
<option selected>Bla</option>
<option>Ble</option>
</select>
<select class="selectpicker" data-width="50%">
<option>cow</option>
<option>bull</option>
<option>ASD</option>
<option selected>Bla</option>
<option>Ble</option>
</select>
3.7自定义option
-
添加图标 用
data-icon
给option添加小图标,实现比较炫酷的效果。如果想要获取更多样式可参考bootstrap官网的图标库,给个网址 www.runoob.com/bootstrap/b…
<select class="selectpicker">
<option data-icon="glyphicon-heart">Ketchup</option>
<option data-icon="glyphicon glyphicon-th-large">Mustard</option>
<option data-icon="glyphicon glyphicon-home">Relish</option>
</select>
- 插入HTML 用data-content可以在option中插入html元素,实现想要的效果
<select class="selectpicker">
<option data-content="<span class='label label-success'>Relish</span>">Relish</option>
</select>
- 插入二级标题 用data-subtext实现二级标题,实现提示或者其他效果,如果要在select中也展示二级标题,要在初始化selectpicker时要设置showSubtext为true
<select class="selectpicker" data-size="5">
<option data-subtext="Heinz">Ketchup</option>
<option data-subtext="ble">Mustard</option>
<option data-subtext="com">Relish</option>
</select>
3.8自定义下拉菜单
1.菜单显示项大小 通过
data-size
属性来限制菜单显示的条数,比如说option有8条,我们只展示5条,其余的通过滚动条显示。
<select class="selectpicker" data-size="5">
<option>apple</option>
<option>banana</option>
<option>group</option>
<option>orange</option>
<option>cherry</option>
<option>mango</option>
<option>pineapple</option>
<option>lychee</option>
</select>
2.全选和全不选 通过设置
data-actions-box="true"
来添加全选和全不选的按钮。
<select class="selectpicker" multiple data-actions-box="true">
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
</select>
// 或
$('.selectpicker').selectpicker({
'selectedText':'cat',
'noneSelectedText':'请选择',
'deselectAllText':'全不选',
'selectAllText': '全选',
})
3.添加数据分割线 设置
data-divider="true"
添加数据分割线。
<select class="selectpicker" data-size="5">
<option>Mustrad</option>
<option >Ketchup</option>
<option >Relish</option>
<option data-divider="true"></option>
<option>Mustrad</option>
<option >Ketchup</option>
<option >Relish</option>
</select>
4.添加菜单头 用
data-header
为下拉菜单设置菜单头。
<select class="selectpicker" data-header="Select a condiment">
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
</select>
5.设置菜单的上浮或者下浮 通过设置
dropupAuto
来设置菜单的上下浮动,dropupAuto默认为true,自动确定是否应显示的菜单上面或下面的选择框,如果设置为false,系统会加入一个dropup样式的上拉框。
$('.selectpicker').selectpicker({
'selectedText':'cat',
'dropupAuto':false
})
<select class="selectpicker dropup">
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
</select>
3.9不可用
在对应的控件上加入
disabled
即可实现。
1.设置
select
不可用。这里select按钮失效,不能点击
<select class="selectpicker" disabled>
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
</select>
2.设置
option
不可用 这里option设置属性为
disabled
的将无法选中
<select class="selectpicker">
<option>Mustard</option>
<option disabled>Ketchup</option>
<option>Relish</option>
</select>
3.设置
optiongroup
不可用 这里是一个optiongroup将无法选中
<select class="selectpicker test">
<optgroup label="Picnic" disabled>
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
</optgroup>
<optgroup label="Camping">
<option>Tent</option>
<option>Flashlight</option>
<option>Toilet Paper</option>
</optgroup>
</select>
bootstrap-select的使用
组件的取值与赋值
(1)取值
var value = $('#sel').val(); #sel为select标签的id值
需要注意的是,如果是多选,这里得到的value变量是一个数组变量。
(2)赋值
//单选赋值
$('.selectpicker').selectpicker('val', '1');
//多选赋值
$('.selectpicker').selectpicker('val', ['1','2','3'])
//在一些级联选择的使用场景中,经常需要在赋值的时候顺便触发一下组件的change事件,我们可以这么做。
$('.selectpicker').selectpicker('val', '1').trigger("change");
//如果是多选的赋值,也是一样
$('.selectpicker').selectpicker('val', ['1','2','3']).trigger("change");
(3)组件其他用法
//全选:
$('.selectpicker').selectpicker('selectAll');
//反选:
$('.selectpicker').selectpicker('deselectAll');
//适应手机模式:
$('.selectpicker').selectpicker('mobile');
//组件禁用:
$('.disable-example').prop('disabled', true);
$('.disable-example').selectpicker('refresh');
//组件启用
$('.disable-example').prop('disabled', false);
$('.disable-example').selectpicker('refresh');
//组件销毁
$('.selectpicker').selectpicker('destroy');
动态加option
ajax的数据refresh和清除
$('.selectpicker').selectpicker('val', '');
$('.selectpicker').selectpicker('refresh');
//selected 选择后数据的获取
var category = $.trim($('#slpk option:selected').val());
动态示例:
//下拉数据加载
$.ajax({
type : 'get',
url : "${pageContext.request.contextPath}/category/findCategory",
dataType : 'json',
success : function(datas) {//返回list数据并循环获取
var select = $("#slpk");
for (var i = 0; i < datas.rows.length; i++) {
select.append("<option value='"+datas.rows[i].name+"'>"
+ datas.rows[i].name + "</option>");
}
$('.selectpicker').selectpicker('val', '');
$('.selectpicker').selectpicker('refresh');
}
});
参考链接