JS\CSS文件导入,在此之前,需先导入1.8以上版本的JQuery
<link rel="stylesheet" type="text/css" href="select2/css/select2.css" />
<script src="js/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/select2/js/select2.js" type="text/javascript" charset="utf-8"></script>
1、本地加载
function initSelect2(){
var dataList = [
{ id: 0, text: 'aaaaaa' },
{ id: 1, text: 'Ants(蚂蚁)' },
{ id: 2, text: 'can you speak javascript(你能讲JavaScript嘛)' },
{ id: 3, text: 'vae(许嵩)' },
{ id: 4, text: 'Badminton(羽毛球)' }
];
$("#custname").select2({
data: dataList,
placeholder:'请选择',//默认文字提示
language: "zh-CN",//汉化
allowClear: true//允许清空
});
}
2、ajax加载
function select2Ajax(){
$("#custname").select2({
ajax: {
url: "url",
type: "POST",
dataType: "json",
async: true,
delay: 500,
contentType: 'application/json',
data: function(params){
var query = {
"ROOT": {
"BUSI_INFO": {
"CUST_NAME": params.term
}
}
};
return JSON.stringify(query)
},
processResults: function (data, params) {
/*var itemList = [];//当数据对象不是{id:0,text:'ANTS'}这种形式的时候,可以使用类似此方法创建新的数组对象
var arr = data.result.list
for(item in arr){
itemList.push({id: item, text: arr[item]})
}*/
var returnData ;
if(data.ROOT.BODY.RETURN_CODE == 0) {
returnData = data.ROOT.BODY.OUT_DATA.rows;
}else{
returnData = "服务调用出错,请刷新界面重试。"
}
return {
results: returnData
};
},
cache: true
},
placeholder:'请选择',//默认文字提示
language: "zh-CN",
tags: false,//允许手动添加
allowClear: true,//允许清空
// escapeMarkup: function (markup) { return markup; }, // 自定义格式化防止xss注入
minimumInputLength: 2//最少输入多少个字符后开始查询
// formatResult: function formatRepo(repo){return repo.text;}, // 函数用来渲染结果
// formatSelection: function formatRepoSelection(repo){return repo.text;} // 函数用于呈现当前的选择
});
// select2 change 事件
$("#custname").on("select2:select",function(){
$("#custId1").val("new value");
});
}
外部调用select2的内置函数AllowClear,重置选中值
$("#custname").val(null).trigger('change.select2');