带模态滚动的 Select2 Bootstrap 模态

Question

更新：

我添加了这个：

$("#id_project").select2({dropdownParent: $(".modal-body")});

...这会导致下拉列表正确放置，并且可以输入搜索。不幸的是……这会导致传递的数据被清除，并且没有可供选择的选项。

我有一个在 Bootstrap 模式中填充的表单，如下所示：

<div class="modal fade show" id="modal-task" style="display: block;">
  <div class="modal-dialog">
    <div class="modal-content">

<form method="post" action="/dataanalytics/sparc/tasks/create/" class="js-task-create-form">
  <input type="hidden" name="csrfmiddlewaretoken" value="W6cnRq9zPDvUdQOpqceXPVulbWJAMFazRStzwnZhLi8UEqa87SYiRKmMoHAKwmvb">
  <div class="modal-body">
  <div class="form-group">
    <select name="project" data-minimum-input-length="2" class="form-control select2-hidden-accessible" required="" id="id_project" data-autocomplete-light-url="/dataanalytics/projectautocomplete/" data-autocomplete-light-function="select2" tabindex="-1" aria-hidden="true">
       <option value="" selected="">---------</option>
    </select>
    <span class="select2 select2-container select2-container--bootstrap select2-container--focus" dir="ltr" style="width: 505.091px;">
    <span class="selection"><span class="select2-selection select2-selection--single" role="combobox" aria-haspopup="true" aria-expanded="false" tabindex="0" aria-labelledby="select2-id_project-container">
    <span class="select2-selection__rendered" id="select2-id_project-container">
    <span class="select2-selection__placeholder">
    </span>
    </span>
    <span class="select2-selection__arrow" role="presentation"><b role="presentation"></b></span></span></span><span class="dropdown-wrapper" aria-hidden="true">
    </span>
    </span>
  </div>
  <div class="form-group">
    <select name="dataSources" data-minimum-input-length="2" class="form-control select2-hidden-accessible" id="id_dataSources" data-autocomplete-light-url="/dataanalytics/datasourceautocomplete/" data-autocomplete-light-function="select2" multiple="" tabindex="-1" aria-hidden="true">
    </select>
    <span class="select2 select2-container select2-container--bootstrap" dir="ltr" style="width: 505.091px;">
    <span class="selection"><span class="select2-selection select2-selection--multiple" role="combobox" aria-haspopup="true" aria-expanded="false" tabindex="-1">
      <ul class="select2-selection__rendered">
         <li class="select2-search select2-search--inline">
         <input class="select2-search__field" type="search" tabindex="0" autocomplete="off" autocorrect="off" autocapitalize="none" spellcheck="false" role="textbox" aria-autocomplete="list" placeholder="" style="width: 0.75em;">
         </li>
      </ul>
    </span>
    </span>
    <span class="dropdown-wrapper" aria-hidden="true">
    </span>
    </span>
  </div>
</div>
</form>
</div>
</div>

带有 select2 单的第一个表单组表现出有问题的行为。具有 select2 多个的第二个表单组按预期工作。为什么这里有差距？

JavaScript：

  var loadForm = function () {
    var btn = $(this);
    $.ajax({
      url: btn.attr("data-url"),
      type: 'get',
      dataType: 'json',
      beforeSend: function () {
        $("#modal-task").modal("show");
      },
      success: function (data) {
        $("#modal-task .modal-content").html(data.html_form);
      }
    });
  };

版本：

• jQuery: 1.12.1
• 选择2：4.0.5
• 引导程序：4

在 Chrome 中一切正常。在 Firefox 中，模式中的 Select2 框不允许输入搜索输入。这是一个已知问题 (https://select2.org/troubleshooting/common-problems)，但似乎没有任何已知解决方案适合我。

为了解决这个问题，我添加了这段代码来设置每个 Select2 的dropdownParent：

$.fn.select2.defaults.set("dropdownParent", $('#modal-task'));

这允许输入搜索输入。但是，我的模式足够长，需要滚动。如果模态框滚动到原始位置之外，单击 Select2 框会导致选项和搜索输入出现在模态框顶部的框上方。这是有道理的，因为所有 Select2 框都使用dropdownParent 绑定到模态本身。

如何防止这种行为并强制 Select2 选项和搜索输入正常显示（直接在 Select2 的上方或下方，具体取决于它相对于窗口边缘的位置）？此外，即使未激活模式，我在页面上也有 Select2 框，因此以这种方式影响所有 Select2 框并不理想。

更新：我尝试将其他代码换成这一行：

$.fn.modal.Constructor.prototype.enforceFocus = function () {};

这与什么都不做具有相同的效果：搜索输入在 Firefox 中不起作用，但下拉菜单已正确放置。

更新 2：我试过了：

$('#id_project').set("dropdownParent", $('#id_project'));

这导致下拉菜单没有出现在任何地方，并且选项消失了（替换为---------）。

更新 3：我试过这个...

$('#modal-task').css('overflow','visible');

...导致搜索输入工作...但模式滚动现在已损坏。此外，下拉列表在 Select2 框的左边缘略微未对齐。

Answer 1

这对我来说很好用

$(document).ready(function () {
    $('select.select2:not(.normal)').each(function () {
        $(this).select2({
            dropdownParent: $(this).parent().parent()
        });
    });
});

Answer 2

我来晚了，可以帮助别人。如果您的模态框上有 tabindex = -1，那么您可能无法输入。尝试删除它。为我工作。

Answer 3

只需像这样使用 select2 来绕过引导模式错误：

$('.my-select2').each(function () {
    $(this).select2({
        dropdownParent: $(this).parent(),// fix select2 search input focus bug
    })
})

// fix select2 bootstrap modal scroll bug
$(document).on('select2:close', '.my-select2', function (e) {
    var evt = "scroll.select2"
    $(e.target).parents().off(evt)
    $(window).off(evt)
})