jquery - 在甜蜜警报 2 中选择 2？

Question

我想用Sweet Alert2制作一个多输入弹出窗口，其中一个输入字段应该是一个带有多个选项的选择。我在某些页面中尝试了 select2 multiple，例如在此示例中：

<select class="js-example-basic-multiple" name="states[]" multiple="multiple">  
    <option value="AL">Alabama</option>
 ...<option value="WY">Wyoming</option> 
</select>

使用插件：

$(document).ready(function() {
   $('.js-example-basic-multiple').select2(); 
});

我尝试在sweet alert配置的自定义html描述中插入html代码，但是没有效果。可以在swal2中插入 select2吗？谢谢

Answer 1

好的，事实上它是可能的，我使用了 swal2 方法onOpen，并使用我的自定义 html 代码加载了 select2 插件：

                   swal({
                    title: "Messaggio",
                    html: html,
                    confirmButtonColor: '#26C281',
                    confirmButtonText: 'Salva',
                    confirmButtonColor: '#26C281',
                    showCancelButton: true,
                    cancelButtonText: 'Chiudi',
                    cancelButtonColor: '#EF4836',
                    focusConfirm: false,
                    onOpen: function () {
                        $('.select2').select2({
                            minimumResultsForSearch: 15,
                            width: '100%',
                            placeholder: "Seleziona",
                            language: "it"
                        });
                    },

Answer 2

上面的答案是可行的，但是如果在 swal2 警报下打开 select2 的下拉菜单，请使用此 CSS

    .select2-container--open {
    z-index: 99999999999999;
    }

Answer 3

.select2-container--open {
z-index: 99999999999999;
}

效果更好:)

Answer 4

我不得不将 select2 下拉容器更改为 swal 模式以修复一些 z-index 和定位问题。

swal.fire({
    html: htmlContent,
    ...
    didOpen: function () {
        $("#swal2-html-container .select2").select2({
            ...
            dropdownParent: $('#swal2-html-container')
        });
    }
})