动态添加的 <option> 元素在 UI 上不可见

Question

我正在尝试从 $.ajax 的 done() 函数动态添加元素：

$.ajax({

        url: getAllTemplates,

        method: "POST",

        data: form_data,

        contentType: false,

        cache: false,

        processData: false

    })

        .done(function (data) {

            let templates = JSON.parse(data);

            console.log(templates);

            let template_dropdown = $('#template');

            $.each(templates, function (key, value) {

                template_dropdown.append($('<option></option>').attr("value", value['name']).text(value['name']));

            });

        })

        .fail(function (jqXHR, textStatus, errorThrown) {

            // do something

        });

我可以console在view source浏览器中和浏览器中看到以下标记：

但是，它没有显示在浏览器的实际下拉列表中：

关于这里出了什么问题的任何线索？

Answer 1

如果您要向下拉列表动态添加选项，则必须在添加选项之前调用以下函数$('.selectpicker').selectpicker('refresh');在添加选项之后将更新 selectpicker 选项并使其可见。