如何使用ajax以编程方式在嵌套模式对话框中更改引导选择2中的默认选择选项？

Posted 2023-05-07

【中文标题】如何使用ajax以编程方式在嵌套模式对话框中更改引导选择2中的默认选择选项？

【英文标题】：How to change default selected option in bootstrap select2 in nested modal dialog programmatically with ajax?

【发布时间】：2019-05-04 18:13:24

【问题描述】：

我有一个带有 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');
    );

【参考方案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');
            );
        );

【讨论】：

谢谢。这是一些很好的理由和一些错误。但效果很好。