如何在使用AJAX时设置Select2的初始值？
如何在使用AJAX时设置Select2的初始值？
提问于 2015-05-19 12:07:22
我有一个从Ajax数组填充的select2 v4.0.0。如果我设置了select2的val，我可以通过javascript调试看到它选择了正确的项(在我的例子中是#3)，但是这没有显示在选择框中，它仍然显示占位符。
而我应该看到的是这样的东西：
在我的表单字段中：
<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);如何使选择框显示所选项目而不是占位符？我是否应该将其作为AJAX JSON响应的一部分发送？
在过去，Select2需要一个名为initSelection的选项，每当使用自定义数据源时都会定义该选项，从而允许确定组件的初始选择。在v3.5中，这对我来说工作得很好。
回答 9
Stack Overflow用户
发布于 2017-03-21 21:08:18
我还没有看到人们真正回答的一个场景是，当选项来自AJAX时，如何进行预选，并且您可以选择多个。由于这是AJAX预选的首选页面，因此我将在此处添加我的解决方案。
$('#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
}); Stack Overflow用户
发布于 2017-05-13 00:05:14
如果您使用的是templateSelection和ajax，则这些其他答案中的一些可能不起作用。当您的数据对象使用id和text以外的值时，创建新的option元素并设置value和text似乎不能满足模板方法的要求。
以下是对我有效的方法：
$("#selectElem").select2({
ajax: { ... },
data: [YOUR_DEFAULT_OBJECT],
templateSelection: yourCustomTemplate
} 点击这里查看jsFiddle：https://jsfiddle.net/shanabus/f8h1xnv4
在我的例子中，由于我的数据不包含必需的id和text字段，因此我必须使用processResults。如果需要这样做，您还需要通过相同的函数运行初始选择。如下所示：
$(".js-select2").select2({
ajax: {
url: SOME_URL,
processResults: processData
},
data: processData([YOUR_INIT_OBJECT]).results,
minimumInputLength: 1,
templateSelection: myCustomTemplate
});
function processData(data) {
var mapdata = $.map(data, function (obj) {
obj.id = obj.Id;
obj.text = '[' + obj.Code + '] ' + obj.Description;
return obj;
});
return { results: mapdata };
}
function myCustomTemplate(item) {
return '<strong>' + item.Code + '</strong> - ' + item.Description;
}Stack Overflow用户
发布于 2017-04-02 06:00:34
在花了几个小时寻找解决方案后，我决定创建自己的解决方案。他就是：
function CustomInitSelect2(element, options) {
if (options.url) {
$.ajax({
type: 'GET',
url: options.url,
dataType: 'json'
}).then(function (data) {
element.select2({
data: data
});
if (options.initialValue) {
element.val(options.initialValue).trigger('change');
}
});
}
}您可以使用此函数初始化选择：
$('.select2').each(function (index, element) {
var item = $(element);
if (item.data('url')) {
CustomInitSelect2(item, {
url: item.data('url'),
initialValue: item.data('value')
});
}
else {
item.select2();
}
});当然，下面是html：
<select class="form-control select2" id="test1" data-url="mysite/load" data-value="123"></select>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/30316586
复制相关文章
相似问题