选择2下拉错误的位置

Question

我正在使用Select2库（版本4.0.1），但我对select的下拉列表有一个奇怪的位置。您可以在下面的图片中看到。

您可以看到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,
})

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