一、插件开源地址
-
bootstrap-select开源地址:https://github.com/silviomoreto/bootstrap-select
-
bootstrap-select使用示例:http://silviomoreto.github.io/bootstrap-select/examples/
-
bootstrap-select文档说明:http://silviomoreto.github.io/bootstrap-select/options/
二、插件的使用
-
引入 bootstrap-select插件
<!-- Bootstrap 核心 CSS 文件 --> <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <!-- Bootstrap-select 核心 CSS 文件 --> <link rel="stylesheet" href="/bootstrap/bootstrap-select.min.css"> <!-- jQuery文件。务必在bootstrap.min.js 之前引入 --> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> <!-- Bootstrap 核心 JavaScript 文件 --> <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> <!-- Bootstrap-select 核心 JavaScript 文件 --> <script src="/bootstrap/bootstrap-select.min.js"></script> <!-- 中文化组件 --> <script src="/bootstrap/defaults-zh_CN.js"></script>
-
一睹初容
/* multiple : 多选 data-live-search="true" : 是否开启搜索功能 data-actions-box="true" : 是否开启全选功能 data-max-options="2" : 设置对多选中2个 data-selected-text-format="count > 3" : 缩略模式,比如当选中值大于3个的时候只显示选中项的个数,注意这个属性只对多选生效 */ <select class="selectpicker" multiple data-live-search="true" data-actions-box="true" data-max-options="2" > <option value="1">系统管理员</option> <option value="2">销售</option> <option value="3">客户经理</option> <option value="4">技术经理</option> <option value="5">人事</option> </select>
-
选项分组
<select class="form-control selectpicker" data-live-search="true" multiple> <optgroup label="广东省"> <option value="1">广州市</option> <option value="2">深圳市</option> <option value="3">珠海市</option> </optgroup> <optgroup label="广西"> <option value="1">南宁市</option> <option value="2">柳州</option> <option value="3">桂林市</option> </optgroup> <optgroup label="山东"> <option value="1">烟台</option> <option value="2">青岛</option> <option value="3">济南</option> </optgroup> </select>
-
显示带颜色的标签
<select class="form-control selectpicker" title="请选择省份" multiple> <option data-content="<span class='label label-success'>广东省</span>">广东省</option> <option data-content="<span class='label label-info'>广西省</span>">广西省</option> <option data-content="<span class='label label-warning'>福建省</span>">福建省</option> <option data-content="<span class='label label-danger'>山东省</span>">山东省</option> </select>
-
默认样式选择
<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>
三、插件取值赋值
-
插件取值
var value = $('#sel').val(); //如果是多选,这里得到的value变量是一个数组变量,形如 ['1','2','3']
-
插件赋值
$('.selectpicker').selectpicker('val', '1'); //在一些级联选择的使用场景中,经常需要在赋值的时候顺便触发一下组件的change事件,我们可以这么做。 $(function(){ $('.selectpicker').change(function(){ alert('change') }) }) $('.selectpicker').selectpicker('val', '1').trigger("change"); //如果是多选的赋值,也是一样 $('.selectpicker').selectpicker('val', ['1','2','3']).trigger("change");
四、插件的其他用法
- 全选
$('.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');
五、插件远程获取数据(这里就不封装了)
$(function (){
//这里就使用ajax请求获取数据,拼装到<select>标签下
$.ajax({
url: "test/list",
method: "get",
success: function (data){
$("#sel").empty();
var json=eval(data.data);
$.each(json,function(index,item){
$("#sel").append("<option value="+json[index].id+" >"+json[index].name+"</option>" );
});
$('#sel').selectpicker('refresh');//刷新下才会生效
}
})
})
- 注意
- 当你引入后出现了下拉框页面,但是点下拉按钮没有反应
- 很有可能是你的
js
或css
样式有重的
六、总结
至此,本文结束,博主介绍过多个bootstrap的select组件,纵观所有,还是这个稍微好用一些,不管是兼容性还是实现效果都还不错,有兴趣的可以用起来试试。
本文原创出处:http://www.cnblogs.com/landeanfen/