How to change default selected option in bootstrap select2 in nested modal dialog programmatically with ajax?

Question

I have a bootstrap modal dialog with a select2 option selector. 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. But when a modal form appears select2 doesn't show true data. it shows default. When user clicks on edit button the showEditModal() function gets call.

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

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