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(); 
});

我尝试在甜蜜警报配置的自定义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 {
    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')
        });
    }
})

在Sweet Alert 2中选择2？

4 个答案: