引用
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
支持中文需要引用对应的语言包
select2_locale_zh-CN.js
$("#e1").select2({
createSearchChoice:function(term, data) { //如果没有匹配到选项,自动将用户输入值封装成相应的数据对象
return {id:term, text:term};
},
formatResult:function(item){ //可自定义模板 下拉选项的模板
return item.text+' '+item.id;
},
ajax: {
url: "url", // 异步请求地址
dataType: "json", // 数据类型
delay: 250,//默认情况下,每当用户改变搜索条件后就会触发ajax请求,使用ajax.delay来限制请求时间间隔,单位ms
data: function(term, page) { // 请求参数(GET)
return {
wd: term
};
},
processResults: function (data) {//处理返回数据
return {
results: data
};
},
escapeMarkup: function(m) { //转义字符处理
return m;
}
}
}).on('change',function(event){
//TODO:
change事件,event有三个属性 val、added、removed,分别对应当前对象,新选中的对象、删除的对象。
数据格式参考ajax返回的json格式
});
html页面
<input id="e1" type="hidden"/>