[英]Select2 initSelection PreLoaded Data doesn't show
我正在使用select2將遠程數據加載到一個select中,輸入標簽有一個預加載的value屬性,指向一個預先選擇的選項,當我加載頁面時,它會在右邊顯示帶有Clear選項(x)的select但是數據沒有顯示。
這是我的代碼:
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; }
});
我該怎么解決這個問題?
確保在initSelection函數中,LoadData.asp傳遞單個對象而不是包含單個對象的數組。
錯誤:
[{"id": 5, "text":"myValue"}]
正確:
{"id": 5, "text":"myValue"}
這是你的功能修改。
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]);
});
}
},
我遇到了類似的問題,我通過在input元素的html中包含一個value屬性來解決它,當然還有適當的formatSelection和initSelection。
傳入select2的json有兩個字段id和text。
這是我的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);
}
});
和輸入元素本身:
<input value="0000" name="contributorNameSearch" id="contributorNameSearchId"/>
注意value屬性的虛擬值。
callback(data);
需要一個data.something(雖然你的FormatSelection似乎沒問題)。 檢查從LoadData.asp返回的數據。
我希望這個對你有用。
當select2完成加載時寫下面的代碼
$(".ajax_select").select2("data", {"id": 5, "text": "Test"});
它將設置select2的默認選擇。
對我來說,我必須從初始設置中刪除占位符選項 - 可能對其他人有用
在經歷了很多努力之后,解決方案如下
注意,數據對象應該與repoFormatSelection var data = {id:1,cardname:“Abolish”}具有相同的密鑰;
您將在所有答案中看到“text”,但它應與您的json變量相同
還有一件更重要的事情,請確保在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;
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.