Sweetalert2 和 Bootstrap 选择

Question

我正在尝试使用引导选择创建自定义选择选项，以允许搜索我的选项。

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

这是我的代码，但是它不会在甜蜜警报中显示任何内容（html）。它只会显示标题和确定/取消按钮。

如果可以做到这一点，或者我是否遗漏了什么，有什么想法吗？

Answer 1

您尝试在字符串中使用模板文字，但这不是必需的，因为您已经使用 html 内容创建了一个字符串。看看你的

${Object.entries(options)

，这没有必要替换为

Object.entries(options)

我也看到它在你创建

+ "${Object.entries(options).map(([id, label]) => `<option value='${id}'>${label}</option>`).join('')}" 

时的字符串内部。

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