使用AJAX的Select2出现在模态后面

Question

我在模态中使用 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>

Answer 1

按照 Rory McCrossan 的建议检查 DOM 后，我发现 Select2 生成的

span

元素的 z 索引较低。我通过将以下内容添加到我的代码中来修复它：

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

Answer 2

问题与 select2 的父级有关。创建 select2 时，它的父级是 html 主体（而不是模式）。 解决方案是实例化 select2，如下所示：

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

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

Answer 3

上述解决方案不适用于我的情况。 但我通过添加下面的CSS解决了这个问题：

.select2-drop {z-index: 99999;}

Answer 4

出现此问题的原因是 Bootstrap 模态往往会从模态之外的其他元素中窃取焦点。由于默认情况下，Select2 将下拉菜单附加到元素，因此它被视为“模态之外”。

为了避免此问题，您可以使用 dropdownParent 设置将下拉列表附加到模式本身：

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

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

了解更多信息： 当我在 Bootstrap 模式中使用 Select2 时，它无法正常工作

Answer 5

dropdownParent，美国语属性 para asignar la posicion del select2

$("#idfamilia").select2({ 
 dropdownParent: $('#modalAgregarProducto'),  
 theme: "bootstrap4", 
 placeholder: "Seleccione", allowClear: true,  
});