JS组件系列——再推荐一款好用的bootstrap-select组件，亲测还不错

前言：之前分享过两篇bootstrap下拉框的组件：JS组件系列——两种bootstrap multiselect组件大比拼 和 JS组件系列——Bootstrap Select2组件使用小结 ，收到很多园友的关注和提问，最后总结这两篇里面的下拉框组件都存在一些大大小小的问题，比如两种bootstrap mutiselect组件，界面渲染效果略差；再比如select2一些兼容性问题、多选的取值赋值等问题都困扰着博主以及很多园友，项目里面的下拉框很早就替换为今天介绍的这款组件，所以今天介绍给大家，让大家多一个选择也好！感谢大家的持续关注！

说点题外话。本来这篇早就准备写了，不料最近项目准备走前端化开发路线，可忙坏博主了，一时间，Node.js、npm、webpack、react、react-router、ant.design等等技术都得学呀，脑子真是个好东西，能够一下子容纳这么多新知识，虽然各种不适应，但时间一长就慢慢习惯了，所幸博主经常关注这方面的技术，所以学起来并没有那么吃力。关于vue和react，很多群友都讨论过它们的优势和劣势，其实博主觉得说不上哪个组件更优，关键得看项目适应哪种生态，我们选用react很大一部分原因就是看中了ant.design的效果和丰富的组件库。好了，再说就跑题了，以后博主分享搭建前端环境的时候再来细说。

本文原创地址：http://www.cnblogs.com/landeanfen/p/7457283.html

一、组件开源地址以及API说明

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/

二、组件效果示例

一睹初容

(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: '请选择',

};

//初始化
$(".selectpicker").each(function () {
var target = $(this);
target.attr("title", $.fn.select.defaults.placeholder);
target.selectpicker();
});
})(jQuery);

bootstrapSelect
这样封装之后，我们直接使用如下代码即可初始化组件。

$('#sel').bootstrapSelect({
url:'/a/b',
data: {},
valueField: 'value',
textField: 'text',
});

四、源码下载

很多园友和群友最喜欢的就是demo下载了，博主想说的是希望各位不要太依赖demo，自己先动手尝试可以提高你的学习能力，拿到demo的唯一优势就是上手快一点，但是不利于大家学习。当然本文的demo整理好之后会上传到github，欢迎关注。

五、总结

至此，本文结束，博主介绍过多个bootstrap的select组件，纵观所有，还是这个稍微好用一些，不管是兼容性还是实现效果都还不错，有兴趣的可以用起来试试。如果你觉得本文能够帮助你，可以右边随意 打赏 博主。

本文原创出处：http://www.cnblogs.com/landeanfen/

欢迎各位转载，但是未经作者本人同意，转载文章之后必须在文章页面明显位置给出作者和原文连接，否则保留追究法律责任的权利