select2插件的使用

时间:2021-07-23 15:06:18

前段时间用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 );(新版)