select2插件的使用

Posted 2020-08-28 你是我支撑下去的理由

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