Question

jQuery select2 initselection不工作问题，怎么解决

Answer 1

在[Jquery select美化增加版Select2使用]说明了jquery select2的基本使用，今天将select2 ajax服务端获取数据的例子做一下说明。并总结一下我在项目中遇到的几个问题。

1、服务端例子：
页面结构html：

<input type="text" id="num">

Js处理：

$(document).ready(function({
$("#num").select2({
placeholder:"输入一个AS号码",//文本框的提示信息
minimumInputLength:1, //至少输入n个字符，才去加载数据
allowClear: true, //是否允许用户清除文本信息
ajax:{
url:'${pageContext.request.contextPath }/……!getASNumber.do', //地址
dataType:'text', //接收的数据类型
//contentType:'application/json',
data: function (term, pageNo) { //在查询时向服务器端传输的数据
term = $.trim(term);
return {
autNumber: term, //联动查询的字符
pageSize: 15, //一次性加载的数据条数
pageNo:pageNo, //页码
time:new Date()//测试
}
},
results:function(data,pageNo){
if(data.length>0){ //如果没有查询到数据，将会返回空串
var dataObj =eval("("+data+")"); //将接收到的JSON格式的字符串转换成JSON数据
var more = (pageNo*15)<dataObj.total; //用来判断是否还有更多数据可以加载
return {
results:dataObj.result,more:more
};
}else{
return {results:data};
}
}
},
initSelection:function(element,callback){ //初始化，其中doName是自定义的一个属性，用来存放text的值
var id=$(element).val();
var text=$(element).attr("doName");
if(id!=''&&text!=""){
callback({id:id,text:text});
}
},
formatResult: formatAsText //渲染查询结果项
});
})
//格式化查询结果,将查询回来的id跟name放在两个div里并同行显示，后一个div靠右浮动
function formatAsText(item){
var itemFmt ="<div style='display:inline;'>"+item.id+"</div><div style='float:right;color:#4F4F4F;display:inline'>"+item.name+"</div>"
return itemFmt;
}

需要服务器端传输的数据格式：“{'result':[{'id':'4048','text':'4808','name':'CHINA169-BJ'},{'id':'4048','text':'4808','name':'CHINA169-BJ'}],'total':'1'}”
注：返回的数据格式是json格式的，result存放的是符合查询条件的记录前n条数据的一些属性，total存放的是符合查询条件的记录的总数
在联动查询的过程中，向服务器端传送了四个参数，其中 asNumber是指定的查询的数据，pageNo和pageSize是用来做分页效果的(注：需要自己在后台根据页号跟页码实现分页) ，分别代表页码和每页的记录数，在这里先加载了15条数据，当你鼠标滚动到最底部的时候，就会根据你传的这三个参数，加载下15条的数据。

2、注意事项
清理已有的Select2的数据：
$("#selectsq").empty(); //清除下拉框option，不是会累加

Select2加载已选择的数据：
if (EditActiveModel != null) {
var tagss = new Array();

$.each(EditActiveModel.CommunityList, function (key, val) {
tagss.push(val.Id);
});
}
$("#selectsq").val(tagss).trigger("change");

Select2数据变化事件：

$("#selectsq").on("change", function (e) { ToggleProductList(); })