动态添加的<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选项并使其可见。