如何使用Ajax以編程方式在嵌套模式對話框的bootstrap select2中更改默認選擇的選項？

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