[英]How to change default selected option in bootstrap select2 in nested modal dialog programmatically with ajax?
I have a bootstrap modal dialog with a select2 option selector. 我有一个带有select2选项选择器的引导模式对话框。 when user clicks on edit button an ajax request calls and gets record info from server, then bootstrap modal dialog appears and initiates record data in a modal form.
当用户单击编辑按钮时,Ajax请求将调用并从服务器获取记录信息,然后出现引导模式对话框,并以模式形式启动记录数据。 But when a modal form appears select2 doesn't show true data.
但是,当出现模态形式时,select2不会显示真实数据。 it shows default.
它显示默认值。 When user clicks on edit button the showEditModal() function gets call.
当用户单击编辑按钮时,showEditModal()函数将被调用。
function showEditModal(getUrl) {
$('#modalCreate').on('show.bs.modal', function (event) {
initSelect2();
});
$.ajax({
url: getUrl,
type: "GET",
}).then(function (data) {
$('#pid').val(data.detail.pid);
$('#name').val(data.detail.title);
$('#number').val(data.detail.number);
$('#letterNumber').val(data.detail.letterNumber).trigger('change');
$('#abstract_desc').val(data.detail.abstractDesc);
$('#tags').val(tags);
$('#tags').trigger('change');
$('#modalUpdateArticle').modal('show');
});
}
function initSelect2() {
var getTagsUrl = "/tags";
$('#tags').remove();
var newOption = new Option("<...>", -1, false, false);
$("#tags").append(newOption).trigger('change');
$.ajax({
url: getTagsUrl,
type: "GET",
}).then(function (data) {
var tag = [];
for (i in data.detail) {
var tag = {id: data.detail[i].pid, name: data.detail[i].name};
var newOption = new Option(tag.name, tag.id, false, false);
$("#tags").append(newOption);
}
$("#tags").select2().trigger('change');
});
var getLetterUrl = "/letters";
$('#letterNumber').remove();
var newOption = new Option("<...>", -1, false, false);
$("#letterNumber").append(newOption).trigger('change');
$.ajax({
url: getLetterUrl,
type: "GET",
}).then(function (data) {
var letters = [];
for (i in data.detail) {
var letter = {id: data.detail[i].pid, name: data.detail[i].name};
var newOption = new Option(letter.name, letter.id, false, false);
$("#letterNumber").append(newOption);
}
$("#letterNumber").select2().trigger('change');
});
}
I see some mistake on your code. 我在您的代码上看到了一些错误。 Based on your code, user click an edit button, and a modal dialog appears.
根据您的代码,用户单击编辑按钮,然后出现一个模式对话框。 you can call ajax when modal dialog shows.
您可以在显示模态对话框时调用ajax。 like this:
像这样:
function showEditModal(getUrl) { $('#modalCreate').on('show.bs.modal', function (event) { initSelect2(); }); $('#modalUpdateArticle').modal('show'); } $('#modalUpdateArticle').on('show.bs.modal', function (event) { $.ajax({ url: getUrl,`` type: "GET", }).then(function (data) { $('#pid').val(data.detail.pid); $('#name').val(data.detail.title); $('#number').val(data.detail.number); $('#letterNumber').val(data.detail.letterNumber).trigger('change'); $('#abstract_desc').val(data.detail.abstractDesc); $('#tags').val(tags); $('#tags').trigger('change'); $('#modalUpdateArticle').modal('show'); }); });
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.