javascript - 动态添加的 元素在 UI 上不可见

Question

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

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

我可以在控制台以及浏览器的查看源代码中看到以下标记:

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

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

Answer 1

如果您要向下拉列表动态添加选项，那么您必须在添加选项之前调用以下函数

$('.selectpicker').selectpicker('刷新');

添加选项后将更新选择器选项并使其可见。