jquery 带有AJAX的Select2出现在模态模式之后

imzjd6km 于 2023-10-17 发布在 jQuery

关注(0)|答案(4)|浏览(115)

我在一个模态中使用Select2，但它并不完全正确，正如你在这里看到的：https://gyazo.com/a1f4eb91c7d6d8a3730bfb3ca610cde6
结果显示在模态后面。我该怎么办？我读过类似的帖子，但都是关于删除tabindex的，我的代码中没有，所以我不知道如何修复它。下面是我的代码：

<div class="remodal shadow" data-remodal-id="keuze" data-remodal-options="closeOnOutsideClick: false">
    <button data-remodal-action="close" class="remodal-close"></button>
    <div class="panel-header">Kies uw type logboek</div>
    <div class="modal-body">
        <select id="select" class="searchselectstyle select2"></select>
        <button data-remodal-action="cancel" class="remodal-cancel mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect cancel">Cancel</button>
        <button data-remodal-action="confirm" class="remodal-confirm mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect send">Aanmaken</button>
    </div>
</div>

<script type="text/javascript">
    token = '{{csrf_token()}}';
    $(document).ready(function() {
        $('#select').select2({
            ajax: {
                type: "POST",
                url: "ajax/getlogtypes",
                dataType: 'json',
                data: function (params) {
                    return {
                        q: params.term, // search term
                        page: params.page,
                        '_token' : token
                    };
                },
                escapeMarkup: function (markup) {
                    return markup;
                }, // let our custom formatter work
                minimumInputLength: 1
            }
        });
    });
</script>

jquery

来源：https://stackoverflow.com/questions/36311093/select2-with-ajax-appears-behind-modal

4条答案

按热度按时间

wlsrxk511#

在按照Rory McCrossan的建议检查DOM之后，我发现Select2生成的span元素的z索引较低。我通过在代码中添加以下内容修复了它：

.select2-container{
    z-index:100000;
}

赞(0）回复(0）举报 2023-10-17

kt06eoxx2#

问题与select2的父级有关。当select2被创建时，它的父对象是html body（而不是modal）。解决方案是示例化select2如下：

$('.modal .select2').select2({
    dropdownParent: $('.modal')
});

更多信息请参阅此处：[https://select2.org/troubleshooting/common-problems]

赞(0）回复(0）举报 2023-10-17

iswrvxsc3#

上面的解决方案在我的情况下不起作用。但我通过添加下面的CSS解决了它：
.select2-drop {z-index: 99999;}

赞(0）回复(0）举报 2023-10-17

qxgroojn4#

出现此问题的原因是Bootstrap模态倾向于从模态外部的其他元素中窃取焦点。由于默认情况下，Select2将菜单附加到元素，因此它被认为是“在模式之外”。
为了避免这个问题，你可以使用dropdownParent设置将dropdown附加到模态本身：

<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
...
<select id="mySelect2">
    ...
</select>
...

<script>
    $('#mySelect2').select2({
        dropdownParent: $('#myModal')
    });
</script>

赞(0）回复(0）举报 2023-10-17

我来回答

jquery 带有AJAX的Select2出现在模态模式之后

4条答案

相关问题

热门标签

最新问答