我已经阅读过this,this,this并根据文档the most important here,但它们都不适用于我.
我正在尝试使用AJAX select2.我正在尝试制作一个通用的“选择”项目.
因此,对于具有data-select2-json属性的所有元素,我将select2应用于data-select2-json值中的ajax URL.
$('[data-select2-json!=""][data-select2-json]').each(function() {
var url = $(this).attr('data-select2-json');
var pg_size = $(this).attr('data-select2-page-size') | 30;
$(this).select2({
language: language_code,tokenSeparators: [',',' '],ajax: {
url: url,dataType: 'json',delay: 300,data: function (params) {
return {
q: params.term,// -> q=[search term]
page: params.page // -> page=[no page]
};
},processResults: function (data,params) {
params.page = params.page || 1;
console.log(data.items);
return {
results: data.items,pagination: {
more: (params.page * pg_size) < data.total
}
};
},cache: true
},// let our custom formatter work
escapeMarkup: function (markup) { return markup; },minimumInputLength: 1,templateResult: formatRepo,templateSelection: formatRepoSelection
});
});
它运作良好!
服务器发送的JSON总是这样格式化:
{"items":
[{"item": "Fran\u00e7ais","id": 1},{"item": "Finlandais","id": 5},{"item": "Chinois simplifi\u00e9","id": 15}
],"total": 3}
它非常接近您can find in the documentation的AJAX示例.我的问题是AJAX initiatilize:我想要在HTML中添加值:
然后用select2初始化(=代码$(this).select2({.. above)但这不起作用并给我空白值:
注意:the solution here given by Kevin Brown也不起作用,给出了完全相同的结果.
另一个解决方案是在AJAX中使用参数“& init = 1”(或类似的东西)询问URL,这样服务器就会为每个值发送带有checked:true等参数的结果,我将调用select2有了这些价值观.
文档中没有任何关于如何预填充select2的内容.我应该怎么做?
这是我的其他功能:
function item_or_text(obj) {
if (typeof(obj.item)!='undefined') {
return (obj.item.length ? obj.item : obj.text);
}
return obj.text;
}
function formatRepo(data) {
if (data.loading) return data.text;
var markup = item_or_text(data);
console.log('formatRepo',data,markup);
return markup;
}
function formatRepoSelection(item) {
var retour = item_or_text(item);
console.log('formatRepoSelection',item,item.item,retour);
return retour;
}
最佳答案
我使用Select2 Examples页面上提供的示例代码创建了一个working example on jsfiddle.我只需要更改他们的示例选择标记以接受与您相同的多个标记:
原文链接:https://www.f2er.com/jquery/427750.html
我还添加了第二个默认选择选项:
如果您看一下小提琴,您会看到它如何运作您希望您的工作方式.
您没有包含templateSelection的代码:formatRepoSelection方法.我的猜测是方法是导致问题的原因.示例页面上使用的代码是:
function formatRepoSelection(repo) {
return repo.full_name || repo.text;
}
虽然我不知道你的formatRepoSelection代码是什么,但我认为如果你把它改成如下,你的问题将会解决:
function formatRepoSelection(repo) {
return repo.item;
}