select2插件的使用

Posted 你是我支撑下去的理由

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了select2插件的使用相关的知识,希望对你有一定的参考价值。

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

 

以上是关于select2插件的使用的主要内容,如果未能解决你的问题,请参考以下文章

在select2 jquery插件中没有调用initSelection

在 PHP 中,如何使用 select2(Jquery 插件)显示选定的值

无法在 Bootstrap 的 select2 插件中设置选定值

如何使用 select2 插件隐藏下拉列表中的选项?

yii2 kartik select2 插件在模态下不起作用

select2插件多选不换行