Select2 下拉菜单未出现在正确的位置

Question

我在模式中嵌入了一个 select2 多选，但是当我单击 select2 容器使下拉菜单出现在选项中时，下拉菜单没有出现在它应该出现的位置 -相反，它位于页面的一半。当我缩小页面时，它出现在正确的位置，但放大后 returns 它出现在错误的位置。

这是什么原因造成的，最好的纠正方法是什么？

普通视图

缩小

我已经按照其他问题和答案的建议尝试了一些事情：

已从模态

tabindex="-1"

已将 style="overflow:hidden;" 添加到 <div class="modal-body">
添加了 dropdownParent 以将下拉列表附加到模态对话框，而不是 HTML 正文
试图更改 CSS

z value

编辑我的页面上有以下脚本来触发 select2 容器。这是它自己导致下拉菜单正常运行的原因。

        document.addEventListener("DOMContentLoaded", function() {
            // Select2
            $("#hazards").each(function() {
                $(this)
                    .wrap("<div class=\"position-relative\"></div>")
                    .select2({
                        placeholder: "Select hazards or search by typing above",
                        dropdownParent: $(this).parent()
                    });
            });
        });

我还有另一个脚本，当我的 select2 发生变化时，将结果推送到不同的多选。代码的开头是这样的：

window.addEventListener('DOMContentLoaded', () => {
    $('#hazards').select2();
  let hprops = document.getElementById('hp_codes')
//      document.querySelector('#hazards').addEventListener('change', e => {
// The hazards addEventListener was not firing?
  $('#hazards').on('change', e => {
    let options = e.target.options;
    let hazards = [];
    for (var i = 0, l = options.length; i < l; i++) {
      if (options[i].selected) {
        hazards.push(options[i].value);
      }
    }

...  then if hazards results is XXXX push YYYY

当第二个代码被注释掉而只有第一个代码时，一切正常，但结果不会推送到我的第二个多选。当第一个被注释掉而第二个单独留下时，它无法按预期工作，下拉菜单显示位置不正确。所以看起来像js冲突。

如何在保持第二个脚本功能的同时将第一个脚本合并到第二个脚本中？

Answer 1

在第二个脚本中，Select2 插件是 re-initiazed，没有其他选项： $('#hazards').select2();

正确的代码应该是：

window.addEventListener('DOMContentLoaded', () => {
    

 // Select2
 $("#hazards").each(function() {
      $(this)
        .wrap("<div class=\"position-relative\"></div>")
        .select2({
           placeholder: "Select hazards or search by typing above",
           dropdownParent: $(this).parent()
        });
 });


  let hprops = document.getElementById('hp_codes')
//      document.querySelector('#hazards').addEventListener('change', e => {
// The hazards addEventListener was not firing?
  $('#hazards').on('change', e => {
    let options = e.target.options;
    let hazards = [];
    for (var i = 0, l = options.length; i < l; i++) {
      if (options[i].selected) {
        hazards.push(options[i].value);
      }
    }

...  then if hazards results is XXXX push YYYY

Select2 下拉菜单未出现在正确的位置

Select2 dropdown not appearing in correct place

html

css

jquery-select2