Как программно изменить выбранную по умолчанию опцию в bootstrap select2 во вложенном модальном диалоге с помощью ajax?

Question

У меня есть модальное диалоговое окно начальной загрузки с селектором опций select2.когда пользователь нажимает кнопку редактирования, ajax-запрос вызывает и получает информацию о записи с сервера, тогда появляется модальное диалоговое окно начальной загрузки и инициирует данные записи в модальной форме.Но когда появляется модальная форма, select2 не показывает истинные данные.это показывает по умолчанию.Когда пользователь нажимает кнопку редактирования, вызывается функция 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');
    });
}

Answer 1

Я вижу ошибку в вашем коде.На основе вашего кода пользователь нажимает кнопку редактирования, и появляется модальное диалоговое окно.Вы можете вызвать ajax, когда появится модальное диалоговое окно.как это:

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');
            });
        });