使用示例
1、基础示例
既然是bootstrap-select,组件肯定依赖bootstrap的,而bootstrap又依赖jquery的,所以使用组件必须引用以下文件
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.css">
<link rel="stylesheet" href="bootstrap-select.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.js"></script>
<script src="bootstrap-select.js"></script>
使用比较简单,不需要引用任何js,直接使用class就可以初始化
<select class="selectpicker">
<option value="1">广东省</option>
<option value="2">广西省</option>
<option value="3">福建省</option>
<option value="4">湖南省</option>
<option value="5">山东省</option>
</select>
给一个select标签加上selectpicker样式即可
多选
<select class="selectpicker" multiple>
<option value="1">广东省</option>
<option value="2">广西省</option>
<option value="3">福建省</option>
<option value="4">湖南省</option>
<option value="5">山东省</option>
</select>
2、其他效果示例
上面是最简单的使用,下面就将一些常用的效果给出代码示例
给组件加搜索功能
<select class="selectpicker" multiple data-live-search="true">
<option value="1">广东省</option>
<option value="2">广西省</option>
<option value="3">福建省</option>
<option value="4">湖南省</option>
<option value="5">山东省</option>
</select>
选项分组
<select class="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>
设置最多选中项为2个
<select class="selectpicker" multiple data-live-search="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>
缩略模式,比如当选中值大于3个的时候只显示选中项的个数,注意这个属性只对多选生效
<select class="selectpicker" multiple data-live-search="true" data-selected-text-format="count > 3">
<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" 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>
默认样式选择
//默认样式有:btn-primary、btn-info、btn-success、btn-warning、btn-danger
<select class="selectpicker" data-style="btn-primary">
...
</select>
3、组件取值赋值
3.1、组件取值
关于组件取值保持原生的jquery方法,比如:var value = $(‘#sel’).val();需要注意的是,如果是多选,这里得到的value变量是一个数组变量,形如:[‘1’,’2’,’3’]
3.2、组件赋值
组件赋值就需要稍微变换一下了,如果你直接$(‘#sel’).val(‘1’),这样赋值将会失效,正确的赋值方法为:
$('.selectpicker').selectpicker('val','1');
在一些级联选择的使用场景中,经常需要在赋值的时候顺便触发一下组件的chang事件,我们可以这么做
$('.selectpicker').selectpicker('val','1').trigger("change");
如果是多选的赋值也是一样
$('.selectpicker').selectpicker('val',['1','2','3']).trigger("change");
4、组件其他用法
全选: $(‘.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');
5、组件封装
上面关于组件的初始化都是通过class=’selectpicker’去做初始化的,很多情况下,我们的select的option都是动态获取的,然后再初始化。这里封装一个ajax请求,然后动态构造option
(function ($) {
//1.定义jquery的扩展方法bootstrapSelect
$.fn.bootstrapSelect = function (options, param) {
if (typeof options == 'string') {
return $.fn.bootstrapSelect.methods[options](this, param);
}
//2.将调用时候传过来的参数和default参数合并
options = $.extend({}, $.fn.bootstrapSelect.defaults, options || {});
//3.添加默认值
var target = $(this);
if (!target.hasClass("selectpicker")) target.addClass("selectpicker");
target.attr('valuefield', options.valueField);
target.attr('textfield', options.textField);
target.empty();
var option = $('<option></option>');
option.attr('value', '');
option.text(options.placeholder);
target.append(option);
//4.判断用户传过来的参数列表里面是否包含数据data数据集,如果包含,不用发ajax从后台取,否则否送ajax从后台取数据
if (options.data) {
init(target, options.data);
}
else {
//var param = {};
options.onBeforeLoad.call(target, options.param);
if (!options.url) return;
$.getJSON(options.url, options.param, function (data) {
init(target, data);
});
}
function init(target, data) {
$.each(data, function (i, item) {
var option = $('<option></option>');
option.attr('value', item[options.valueField]);
option.text(item[options.textField]);
target.append(option);
});
options.onLoadSuccess.call(target);
}
target.unbind("change");
target.on("change", function (e) {
if (options.onChange)
return options.onChange(target.val());
});
}
//5.如果传过来的是字符串,代表调用方法。
$.fn.bootstrapSelect.methods = {
getValue: function (jq) {
return jq.val();
},
setValue: function (jq, param) {
jq.val(param);
},
load: function (jq, url) {
$.getJSON(url, function (data) {
jq.empty();
var option = $('<option></option>');
option.attr('value', '');
option.text('请选择');
jq.append(option);
$.each(data, function (i, item) {
var option = $('<option></option>');
option.attr('value', item[jq.attr('valuefield')]);
option.text(item[jq.attr('textfield')]);
jq.append(option);
});
});
}
};
//6.默认参数列表
$.fn.bootstrapSelect.defaults = {
url: null,
param: null,
data: null,
valueField: 'value',
textField: 'text',
placeholder: '请选择',
onBeforeLoad: function (param) { },
onLoadSuccess: function () { },
onChange: function (value) { }
};
})(jQuery);
$(function(){
$('#sel').bootstrapSelect({
url:'/a/b',
data:
[
{
value: "a",
text: "1"
},
{
value: "b",
text: "2"
},
{
value: "c",
text: "3"
}
],
valueField: 'value',
textField: 'text'
});
//初始化
$(".selectpicker").each(function () {
var target = $(this);
target.attr("title", $.fn.bootstrapSelect.defaults.placeholder);
target.selectpicker();
});
})
html页面:
<select id="sel"></select>