使用Sweetalert2+Bootstrap Select弹窗无内容显示问题求助

尝试借助Bootstrap Select创建支持搜索功能的自定义选择器并嵌入Sweetalert2弹窗，但弹窗仅显示标题和确认/取消按钮，无法渲染HTML内容。

$.ajax(vendorList).done(function (response) {

    var options = {};

    $.map(response,
        function (o) {
            options[o.id] = o.display_name;
        });

    var elem = document.createElement("div");
    elem.innerHTML = "<select class='form-control selectpicker' data-live-search='true' title='Search or select...' id='vendor' name='vendor_id'>" 
        + "${Object.entries(options).map(([id, label]) => `<option value='${id}'>${label}</option>`).join('')}" 
        + "<option>Menu</option>" 
        + "</select>";
    
    Swal.fire({
        title: '<strong>Select <b>Vendor</b></strong>',
        html: elem,
        showCancelButton: true,
        focusConfirm: false,
        inputValidator: function (value) {
            return new Promise(function (resolve, reject) {
                if (value !== '') {
                    resolve();
                } else {
                    resolve('You must select a valid vendor.');
                }
            });
        }
    }).then(function (result) {
        if (result.isConfirmed) {
            let vendorId = result.value;
            storeVendor(vendorId);
        }
    });
});

核心问题 #

1. 模板语法未解析：在普通字符串中使用ES6模板字符串语法${...}，浏览器会直接将这段代码当作文本内容，不会自动解析生成<option>元素。
2. Bootstrap Select未初始化：即使HTML结构正确，Bootstrap Select需要在元素插入DOM后调用初始化方法才能渲染出带搜索的选择器。
3. 错误使用inputValidator：该参数是Sweetalert2内置输入框的验证逻辑，不适用于自定义HTML内容的场景。

修正后的代码 #

$.ajax(vendorList).done(function (response) {
    // 循环生成option选项字符串
    let optionsHtml = '';
    $.each(response, function(index, o) {
        optionsHtml += `<option value="${o.id}">${o.display_name}</option>`;
    });
    // 添加额外的Menu选项
    optionsHtml += '<option>Menu</option>';

    // 构建完整的选择器HTML
    const selectHtml = `<div><select class='form-control selectpicker' data-live-search='true' title='Search or select...' id='vendor' name='vendor_id'>${optionsHtml}</select></div>`;
    
    Swal.fire({
        title: '<strong>Select <b>Vendor</b></strong>',
        html: selectHtml,
        showCancelButton: true,
        focusConfirm: false,
        // 弹窗打开后初始化Bootstrap Select
        didOpen: () => {
            $('#vendor').selectpicker('refresh');
        }
    }).then(function (result) {
        if (result.isConfirmed) {
            const vendorId = $('#vendor').val();
            // 自定义验证逻辑
            if (!vendorId) {
                Swal.fire('错误', '请选择有效的供应商', 'error');
                return;
            }
            storeVendor(vendorId);
        }
    });
});

关键修改点 #

• 用$.each循环拼接<option>字符串，确保选项正确生成
• 在Sweetalert2的didOpen钩子中调用selectpicker('refresh')，确保元素插入DOM后完成Bootstrap Select初始化
• 移除无效的inputValidator，改用自定义验证逻辑获取选择值并校验

内容的提问来源于stack exchange，提问作者LeviZoesch