javascript Select2 initSelection PreLoaded Data 不显示
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15582146/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Select2 initSelection PreLoaded Data doesn't show
提问by user2200620
I'm using select2 to loading remote data into a select, the input tag has a value attribute preloaded that points to a preselected option, when I load the page, it show the select with the Clear option (x) at the right but the data doesn't show.
我正在使用 select2 将远程数据加载到一个选择中，输入标签有一个预加载的 value 属性指向一个预选的选项，当我加载页面时，它显示选择与右侧的清除选项 (x) 但数据不显示。
This is my code:
这是我的代码：
function FormatResult(Consig) {
return Consig.NomCon;
}
function FormatSelection(Consig) {
$('#strConNom').val(Consig.NomCon);
return Consig.NomCon;
}
$("#strCon").select2({
placeholder: "Search",
minimumInputLength: 5,
allowClear: true,
ajax: {
url: "LoadData.asp",
dataType: 'jsonp',
data: function (term, page) {
return {
q: term,
CodCas: $('#strCas').val(),
};
},
results: function (data, page) {
return {results: data.ConsigNom};
}
},
initSelection: function(element, callback) {
var id=$(element).val();
if (id!=="") {
$.ajax("LoadData.asp", {
dataType: 'jsonp',
data: {
CodCon: id,
CodCas: $('#strCas').val(),
},
}).done(function(data) {
callback(data);
});
}
},
formatResult: FormatResult,
formatSelection: FormatSelection,
dropdownCssClass: "bigdrop",
escapeMarkup: function (m) { return m; }
});
How can I solved this?
我该如何解决这个问题？
回答by Guillaume Pommier
Make sure that, in your initSelection function, your LoadData.asp passes a single object and NOT an array containing a single object.
确保在您的 initSelection 函数中，您的 LoadData.asp 传递单个对象而不是包含单个对象的数组。
Wrong:
错误的：
[{"id": 5, "text":"myValue"}]
Correct:
正确的：
{"id": 5, "text":"myValue"}
Here's your function modified.
这是您修改的功能。
initSelection: function(element, callback) {
var id=$(element).val();
if (id!=="") {
$.ajax("LoadData.asp", {
dataType: 'jsonp',
data: {
CodCon: id,
CodCas: $('#strCas').val(),
},
}).done(function(data) {
callback(data[0]);
});
}
},
回答by Bill
I had a similar problem and I solved it by including a value attribute in the html of the input element and of course appropriate formatSelection and initSelection.
我有一个类似的问题，我通过在 input 元素的 html 中包含一个 value 属性，当然还有适当的 formatSelection 和 initSelection 来解决它。
The json passed into the select2 has two fields id and text.
传入 select2 的 json 有两个字段 id 和 text。
Here's my js code:
这是我的js代码：
$( "#contributorNameSearchId" ).select2({
placeholder: "Select a contributor",
containerCssClass: "dropDown",
minimumInputLength: 3,
ajax: {
url: "getList?t=contributor",
dataType: 'json',
data: function (term, page) {
return {
term: term, // search term
page_limit: 10,
};
},
results: function (data, page) {
return {results: data};
}
},
allowClear: true,
formatSelection: function(data) {
return data.text;
},
initSelection : function (element, callback) {
var obj= {id:1,text:'whatever value'};
callback(obj);
}
});
and the input element itself:
和输入元素本身：
<input value="0000" name="contributorNameSearch" id="contributorNameSearchId"/>
Notice the dummy value of the value attribute.
注意 value 属性的虚拟值。
你也有可能
callback(data);
needs a data.something instead (although your FormatSelection seems to be ok). Check the data that are returned from your LoadData.asp.
需要一个 data.something 代替（尽管您的 FormatSelection 似乎没问题）。检查从 LoadData.asp 返回的数据。
I hope that this helps.
我希望这个对你有用。
回答by sanjay.parekh13
When select2 is complete loading write following code
当 select2 完成加载写入以下代码
$(".ajax_select").select2("data", {"id": 5, "text": "Test"});
it will set default selection of select2.
它将设置 select2 的默认选择。
回答by Bodkins
For me i had to remove the place holder option from the initial setup - might be useful for someone else
对我来说，我必须从初始设置中删除占位符选项 - 可能对其他人有用
回答by Gajendra Bang
After struggling a lot, the solution is the following
经过一番折腾，解决办法如下
Note, data object should have same key as your repoFormatSelection var data = {id: 1, cardname: "Abolish"};
请注意，数据对象应该与您的 repoFormatSelection var data = {id: 1, cardname: "Abolish"} 具有相同的键；
You will see "text" in all answers, but it should be same as your json variables
您将在所有答案中看到“文本”，但它应该与您的 json 变量相同
and one more important thing, make sure you put value="0" or some dummy value in your select2 hidden input
还有一件更重要的事情，请确保在 select2 隐藏输入中放置 value="0" 或一些虚拟值
$("#myselect").select2({
allowClear: true,
placeholder: "Search for a card",
minimumInputLength: 3,
ajax: {
url: "search.php",
dataType: 'json',
quietMillis: 250,
data: function (term, page) {
return {
q: term, // search term
};
},
results: function (data, page) {
return {results: data.items};
},
cache: true
},
initSelection: function (element, callback) {
var data = {id: 1, cardname: "Abolish"};
callback(data);
},
formatResult: repoFormatResult,
formatSelection: repoFormatSelection,
escapeMarkup: function (m) {
return m;
} // we do not want to escape markup since we are displaying html in results
});
function repoFormatResult(card) {
var markup = '<div class="row-fluid">';
if (card.cardimage != '')
{
markup += '<div class="span2" style="float:left; margin-right:10px"><a class="qtooltip" href="#" rel="' + card.cardimage + '" ><img src="' + card.cardimage + '" width="50px" /></a></div>';
}
markup += '<strong>' + card.cardname + '</strong> <small>' + card.editionname + '</small>'
markup += '<div style="clear:both;"></div></div>';
return markup;
}
function repoFormatSelection(card) {
return card.cardname;
}
