前段时间用select2插件做了可选择可编辑的功能，一直没写笔记，今天又用到了写一下笔记，方便以后使用。
就以现在select2的新版本为准把
一.文件需要引入select2.full.js、select2.min.css（4.0.1版本）和jquery.1.11.1
最新版本的select2如果引用的jquery版本较低的话，某些功能无法正常使用。比如：清除功能 allowClear : true
最新版本请使用<select></select>标签
二.placeholder
placeholder占位提示文字，如果需要清楚功能，则必须设置placeholder。
三.加载本地数据
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
})
四.加载远程数据
$("#loc-parent").select2({
placeholder: "请输入",//默认的提示信息
language: "zh-CN",
allowClear: true,//是否可以清楚选择项，true表示可以，false表示不可用
ajax: {
url: "/getProducts",
dataType: ‘json‘,
delay: 250,
type:"post",
data: function(params){
return {
term: params.term,//查询的关键字(text)前台输入的查询关键字（params.term表示输入框的查询关键字,保存到term对象，即后台保存关键字的对象）
page:10//每次查询的结果数
};
},
processResults:function (data,page){
return {
results: data.name //data返回数据（返回最终数据给results,如果我的数据在data.res下，则返回data.res。这个与服务器返回json有关）page: 10每次查询的结果数
};
},
cache: true
//缓存
},
escapeMarkup: function (markup) { return markup;}, //字符转义处理
minimumInputLength:0, //至少输入n个字符，才去加载数据
maximumInputLength:50, //限制最大字符，以防坑货
templateResult: function (data) { //下拉列表show调用的函数
if (data.id === ‘‘) {
return ‘请输入租户名称‘;
}
return data.name;
},
templateSelection: function (data) {//选择之后
return data.name;
}
})
五.获取选中项
var res=$("#c01-select").select2("data")[0] ; //单选
var reslist=$("#c01-select").select2("data"); //多选
if(res==undefined)
{
alert("你没有选中任何项");
}
if(reslist.length)
{
alert("你选中任何项");
}
六.清空选择项和设置不可用
//清空选择
$("#c01-select").val(null).trigger("change");
$("#c01-select").val("你的placeholder").trigger("change");//或者
//disabled
$("#c01-select").prop("disabled", false);//可用
$("#c01-select").prop("disabled", true);//不可用
七.启用多选
$("#c01-select").select2({
data:data,
tags: true
})
八.再次强调本文介绍的是select2新版本使用，更多的功能可以到官网查阅。
下面简单说明新版与老版差别:
结果回调和选中回调名称：formatResult、formatSelection（老版）；templateResult、templateSelection（新版）
初始化：initSelection（老版）；dataAdapter（新版）
获取或设置值：select2("val")（老版）； $ ( "select" ). val ( )（新版）
停用或启用：$("select").enable(false);（老版）； $ ( "select" ). prop ( "disabled" , true );（新版）