我有一個從Ajax數(shù)組填充的select2 v4.0.0。如果我設(shè)置了select2的值，我可以通過javascript調(diào)試看到它選擇了正確的項（在我的情況下為＃3），但是在選擇框中未顯示該值，它仍顯示占位符。 而我應(yīng)該看到這樣的東西： 在我的表單字段中：<input name="creditor_id" type="hidden" value="3"><div class="form-group minimal form-gap-after"> <span class="col-xs-3 control-label minimal"> <label for="Creditor:">Creditor:</label> </span> <div class="col-xs-9"> <div class="input-group col-xs-8 pull-left select2-bootstrap-prepend"> <select class="creditor_select2 input-xlarge form-control minimal select2 col-xs-8"> <option></option> </select> </div> </div></div>我的JavaScript：var initial_creditor_id = "3";$(".creditor_select2").select2({ ajax: { url: "/admin/api/transactions/creditorlist", dataType: 'json', delay: 250, data: function (params) { return { q: params.term, c_id: initial_creditor_id, page: params.page }; }, processResults: function (data, page) { return { results: data }; }, cache: true }, placeholder: "Search for a Creditor", width: "element", theme: "bootstrap", allowClear: true }).on("select2:select", function (e) { var selected = e.params.data; if (typeof selected !== "undefined") { $("[name='creditor_id']").val(selected.creditor_id); $("#allocationsDiv").hide(); $("[name='amount_cash']").val(""); $("[name='amount_cheque']").val(""); $("[name='amount_direct']").val(""); $("[name='amount_creditcard']").val(""); } }).on("select2:unselecting", function (e) { $("form").each(function () { this.reset() }); ("#allocationsDiv").hide(); $("[name='creditor_id']").val(""); }).val(initial_creditor_id);如何使選擇框顯示所選項目而不是占位符？是否應(yīng)該將其作為AJAX JSON響應(yīng)的一部分發(fā)送？過去，Select2需要一個名為initSelection的選項，該選項在使用自定義數(shù)據(jù)源時就已定義，從而可以確定組件的初始選擇。在v3.5中，這對我來說效果很好。
3 回答
慕萊塢森
TA貢獻1810條經(jīng)驗 獲得超4個贊
我還沒有看到人們真正回答的一種情況是，當選項來自AJAX時，如何進行預(yù)選擇，您可以選擇多個。由于這是AJAX預(yù)選擇的轉(zhuǎn)到頁面，因此我將在此處添加解決方案。
$('#mySelect').select2({
ajax: {
url: endpoint,
dataType: 'json',
data: [
{ // Each of these gets processed by fnRenderResults.
id: usersId,
text: usersFullName,
full_name: usersFullName,
email: usersEmail,
image_url: usersImageUrl,
selected: true // Causes the selection to actually get selected.
}
],
processResults: function(data) {
return {
results: data.users,
pagination: {
more: data.next !== null
}
};
}
},
templateResult: fnRenderResults,
templateSelection: fnRenderSelection, // Renders the result with my own style
selectOnClose: true
});
- 3 回答
- 0 關(guān)注
- 435 瀏覽
添加回答
舉報
0/150
提交
取消