Select2下拉菜单位置错误

Question

我正在使用 Select2 库（版本 4.0.1），但我的选择下拉菜单位置很奇怪。您可以在下图中看到。

您可以看到 select2 下拉列表与选择区域重叠，我可以在文档的示例中看到它应该出现在选择的底部。这是我的代码

<select class="select2">
   <option>--Select--</option>
   <option>Sample Page</option>
</select>

<script>
  jQuery(document).ready(function() {
    jQuery('.select2').select2();
  });
</script>

有什么想法为什么会发生这种情况吗？

Answer 1

在select2初始化中，添加父元素。如果你使用jquery模态，不要单独使用模态ID，更深入一点并将其保留为dropdownParent，否则它将以整个屏幕作为其相对位置。

var dropdownParentEl = $('#addModal > .modal-dialog > .modal-content')
selectBoxElem.select2({
  dropdownParent: dropdownParentEl,
})

我希望我的下拉菜单在模态内容中是相对的，所以我将其保留为我的父级，您可以根据其要求进行更改。