在http://select2.github.io/examples.html中看到初始化选中的做法是这样的:
这种做法只适合数据来自本地,如果用ajax方法拿到的数据就不适用了见代码:
var select = $('#edit_test_select2').select2({
placeholder : '输入关键字',
tags : true,
multiple : true,
width: '100%',
maximumSelectionLength : 3,
allowClear : true,
language: "zh-CN",
ajax : {
url :"${ctx}/。。。。。。",
type : 'get',
dataType : 'json',
processResults: function (data, params) {
params.page = params.page || 1;
var itemList = [];
console.log(data);
for(var i=0; i<data.length; i++){
itemList.push({id: data[i].id, text: data[i].title})
}
return {
results: itemList //data.items,
};
}
}
}).val(["1","2"]).trigger("change");//把id=1或者id=2的值默认选中
想我这样模仿官方给的代码不能实现默认选中的效果,百度、google了半天,发现众多网友提供的办法都不行。
由于项目进度有点紧,没有时间再研究select2插件,另外一个原因是一般下拉框的选项都很少,不会出现几千上万甚至几十万条选项的情况,那样用下拉框反而不是最优解决方案,基于这两个理由,我没有使用select2的ajax方法而是使用了jquery的ajax函数拿到下拉框所有的数据,然后格式化select2支持的格式,直接看代码:
$.ajax({
url :"${ctx}/t。。。。。。。",
type : 'get',
dataType : 'json',
success : function(data){
var itemList = [];
for(var i=0; i<data.length; i++){
itemList.push({id: data[i].id, text: data[i].title})
}
//格式化需要选中的选项值
var inits = eval($("input[name='theme']").val());
var itemList_ = [];
for(var i=0; i<inits.length; i++){
itemList_.push(inits[i].id)
}
$('#edit_test_select2').select2({
placeholder : '输入话题关键字',
tags : true,
multiple : true,
width: '100%',
maximumSelectionLength : 3,
allowClear : true,
language: "zh-CN",
data : itemList
}).val(itemList_).trigger("change");;
}
})
我这种方法的原理就是把ajax异步数据变成本地数据,先用jquery的ajax拿到数据放本地的一个变量里,然后再初始化select2,这种做法只适合数据量小的情况。取巧而已。
如果各位读者有什么牛逼的解决方法可以给我评论,把想法和代码贴上了,大家一起交流学习。