更新:
我添加了这个:
$("#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);
}
});
};
版本:
在Chrome浏览器中一切正常。在Firefox中，模式中的Select2框不允许输入搜索输入。这是一个已知问题(https://select2.org/troubleshooting/common-problems)，但是没有一个已知的解决方案对我有用。
为了解决此问题，我添加了以下代码来设置每个Select2的
dropdownParent:$.fn.select2.defaults.set("dropdownParent", $('#modal-task'));
这允许输入搜索输入。但是，我的模态足够长，需要滚动。如果将模态滚动到原始位置之外，则单击Select2框会导致选择和搜索输入出现在模态顶部的框上方。这是有道理的，因为所有Select2框都使用
dropdownParent绑定(bind)到模态本身。如何防止此行为并强制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框的左边缘略有对齐。
最佳答案
这对我来说很好
$(document).ready(function () {
$('select.select2:not(.normal)').each(function () {
$(this).select2({
dropdownParent: $(this).parent().parent()
});
});
});
关于javascript - Select2 Bootstrap Modal with Modal Scroll(模态滚动)，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/48755763/