jquery 在Sweet Alert 2中选择2？

uinbv5nw 于 2022-11-03 发布在 jQuery

关注(0)|答案(5)|浏览(178)

我想用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吗？谢谢

jquery

来源：https://stackoverflow.com/questions/46825408/select2-in-sweet-alert-2

5条答案

按热度按时间

kd3sttzy1#

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

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"
                        });
                    },

赞(0）回复(0）举报 2022-11-03

0md85ypi2#

上述答案有效，但如果在swal2警报下打开了select2下拉菜单，则使用此CSS

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

赞(0）回复(0）举报 2022-11-03

0vvn1miw3#

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

这样效果更好：）

赞(0）回复(0）举报 2022-11-03

owfi6suc4#

我不得不将select2下拉容器更改为swal模态，以修复一些z索引和定位问题。

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

赞(0）回复(0）举报 2022-11-03

piah890a5#

对于看不到下拉列表的问题，您也可以使用这种方法，特别是如果您不想定义CSS规则

$('select[name=your_name]').on('select2:open', ()=>{
        $('.select2-container').css('z-index', 99999999);
    });

赞(0）回复(0）举报 2022-11-03

我来回答

jquery 在Sweet Alert 2中选择2？

5条答案

相关问题

热门标签

最新问答