用了这么久的Select2插件 ，也该写篇文章 总结总结。当初感觉Select2不是特别好用，但又找不到比它更好的下拉框插件 。
在我的印象里Select2有2个版本，最新版本有一些新的特性，并且更新了一下方法 参数，比最初版本要好看一些，本文针对新版本。
官网：
演示：
由于博客系统 的原因，所以只能演示简单的功能 。
一.文件 需要引入select2.full.js、select2.min.css（4.0.1版本）和jquery.1.8.3及以上
最新版本的select2如果引用的jquery版本较低的话，某些功能 无法正常使用。比如：清除功能 allowClear: true
最新版本请使用标签 （对于本地化的数据你可以使用input，但ajax远程数据必须使用select）
二.placeholder
placeholder占位提示 文字 ，如果需要清楚功能 ，则必须设置placeholder。
三.加载本地数据
select2默 认的数据属性 是id、text，新版本可以自定义 ，但还是用默 认的比较好。所以提供的json中最好转换为id、text形式，当然可以添加 其他属性 。
rush:js;">
var data = [{ id: 0,text: 'enhancement' },{ id: 1,text: 'bug' },{ id: 2,text: 'duplicate' },{ id: 3,text: 'invalid' },{ id: 4,text: 'wontfix' }];
$("#c01-select").select2({
data: data,placeholder:'请选择',allowClear:true
})
四.加载远程数据
rush:js;">
$("#c01-select").select2({
ajax: {
url: "data.json",dataType: 'json',delay: 250,data: function (p
ara ms) {
return {
q: p
ara ms.term,};
},processResults: function (data) {
return {
results: data
};
},cache: true
},escapeMarkup: function (markup) { return markup; },minimumInputLength: 1,templateResult: formatRepo,templateSelection: formatRepoSelection
});
说明：
1.q: para ms.term 查询 参数（para ms.term表示输入框中内容 ，q发生到服务器的参数名；所以这里你可以添加 自定义参数 ，如：stype:'person'）
2.processResults中results: data返回数据（返回最终数据给results，如果我的数据在data.res下，则返回data.res。这个与服务器返回json有关）
3.minimumInputLength 最小需要输入多少个字符才进行查询 ，与之相关的maximumSelectionLength表示最大输入限制。
4.escapeMarkup字符转义处理
5.templateResult返回结果回调function formatRepo(repo){return repo.text},这样就可以将返回结果的的text显示 到下拉框里，当然你可以return repo.text+"1";等
6.templateSelection选中项回调function formatRepoSelection(repo){return repo.text}
7.关于返回的 json的格式：select2默 认json格式为[{id:1,text:'text'},{id:2,text:'text'}]，新版严格要求这样的格式，当然你可以添加 列，如：[{id:1,text:'text',name:'liu'}]
五.获取 选中项
rush:js;">
var res=$("#c01-select").select2("data")[0] ; //单选
var reslist=$("#c01-select").select2("data"); //多选
if(res==undefined)
{
alert("你没有选中任何项");
}
if(reslist.length)
{
alert("你选中任何项");
}
六.清空选择项和设置不可用
rush:js;">
//清空选择
$("#c01-select").val(null).trigger("change");
$("#c01-select").val("你的placeholder").trigger("change");//或者
//如果你使用的是input
标签 （
默 认就是本地数据），你可以用$("#c01-select").val('');来清空选项
//
dis abled
$("#c01-select").prop("
dis abled",false);//可用
$("#c01-select").prop("
dis abled",true);//不可用
七.启用多选
rush:js;">
$("#c01-select").select2({
data:data,multiple: true
});
多选演示：
八.下面简单说明新版与老版对比
1.结果回调和选中回调名称 ：formatResult、formatSelection（老版）；templateResult、templateSelection（新版）
2.初始化：
rush:js;">
//老版，注意如果初始化时文本框中本身没有值（为空），则不会触发该
方法
initSelection: function (element,callback) {
var id = $(element).val();
var data = { id: id,text: id};//这里是初始化的数据，你可以通过id来从服务器上
获取 （ajax），再装载进去
callback(data);
}
//新版，直接给select添加 optionJquery ");
3.获取 或设置值：select2("val")（老版）；$("select").val()（新版）
推荐使用
rush:js;">
var res = $("#id").select2("data");
//返回数组，单选就取res[0]；好处是不进可以
获取 id、text还可以
获取 其他
属性 ，如res[0].names
4.停用或启用：$("select").enable(false);（老版）；$("select").prop("dis abled",true);（新版）
5.主题 样式：新版的样式已经更新，但如果想使用老版样式则可以设置 theme: "classic"
如果大家还想深入学习，可以点击、 进行学习。
以上就是本文的全部内容 ，希望对大家的学习有所帮助，也希望大家多多支持 编程之家。
