select2 - 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 modal，不要单独使用modal ID，再往上一层，保持为dropdownParent，否则会以整个屏幕为相对位置。

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

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