我正在尝试在引导模式中使用select2，但它没有自动获得焦点，并且向下和向上箭头不适用于填充的列表。
当我把它放在模式弹出窗口之外时，同样的 select2 工作。
当我搜索时，我发现很多人都面临同样的问题并找到了这篇文章
Select2 doesn't work when embedded in a bootstrap modal
我实现了这两个解决方案
tabindex。enforceFocus 函数的注释代码。 但它仍然无法正常工作！知道我还缺少什么吗？
编辑1
当 tabindex 从模态 div 中删除但不适用于 IE9 时，它适用于 firefox
编辑2
我发现删除tabindex 实际上并没有被IE9 识别，因为我仍然可以在 IE 中通过转义键隐藏弹出窗口，但在 Firefox 中则不行。
【问题讨论】：
标签： jquery-select2
把它放在你的 JS 中的某个地方：
//fix modal force focus
$.fn.modal.Constructor.prototype.enforceFocus = function () {
var that = this;
$(document).on('focusin.modal', function (e) {
if ($(e.target).hasClass('select2-input')) {
return true;
}
if (that.$element[0] !== e.target && !that.$element.has(e.target).length) {
that.$element.focus();
}
});
};
【讨论】：
使用下面的代码。这将解决您的错误。
$('select').select2({
dropdownParent: $('#my_amazing_modal')
});
【讨论】：
dropdownParent: $(".modal-body , .modal-body1")
我变了：
<div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
到以下：
<div class="modal fade bd-example-modal-lg" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
即从元素中删除属性tabindex="-1"。
【讨论】：
试试这个
<div class="col-sm-8" id="select">
<select type="text" class="form-control" id="helloselect" data-width="100%" name="helloselect">
<option>Hello</option>
<option>Hola</option>
<option>Hallo</option>
</select>
</div>
和脚本
$("#helloselect").select2({dropdownParent: $("#select")});
【讨论】：
我尝试为 select2 下拉选项设置 z-index，它对我有用。这是我所做的：
.select2-container.select2-container--default.select2-container--open {
z-index: 5000;
}【讨论】：
我正在寻找它并遇到了这个：
为我工作，为所有 select2 准备好文档
$('select:not(.normal)').each(function () {
$(this).select2({
dropdownParent: $(this).parent()
});
});
取自： https://github.com/select2/select2-bootstrap-theme/issues/41
【讨论】：
id，并使用了与答案相同的内容。 dropdownParent: $('#new_appended_container')
这会成功的，它对我有用
$.fn.modal.Constructor.prototype.enforceFocus = $.noop;
【讨论】：
引导模式中的属性 tabindex='-1' 可防止模式外的任何元素被 Tab 键访问或聚焦。它对于仅在模式上限制选项卡很有用，可访问性。但是由 select2 创建的元素是文档的子元素。 您需要将 dropdownParent 设置为您的模态
$(document).ready(function() {
$("select").select2({dropdownParent: $("#myModal")});
$('[data-toggle=offcanvas]').click(function() {
$('.row-offcanvas').toggleClass('active');
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>JS Bin</title>
<link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.2/css/bootstrap.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.2.0/js/tether.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.2/js/bootstrap.js"></script>
</head>
<body>
<a href="" data-target="#myModal" data-toggle="modal">Convert to popup</a>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true"><i class="fa fa-close"></i></span>
<span class="sr-only">Close</span>
</button>
<h4 class="modal-title" id="myModalLabel">Bootsrap4 Modal Label</h4>
</div>
<div class="modal-body">
<div id="PopupWrapper">
<select class="form-control">
<option>red</option>
<option>blue</option>
<option>green</option>
<option>orange</option>
<option>yellow</option>
</select>
</div>
</div>
</div>
</div>
</div>
</body>【讨论】：
亲爱的，无需使用 tabindex="-1" 简单的 CSS 解决方案。 我们开始：
.page-body .select2-drop {z-index: 10052;}
.select2-drop-mask {z-index: 10052;}
你就完成了。 :)
【讨论】：
$('#dropdownid').select2({
dropdownParent: $('#modalid')
});
上面的代码对我有用，试试这个。
【讨论】：
$('.select2-with-search').select2({
placeholder: 'Choose one',
searchInputPlaceholder: 'Search options',
dropdownParent: $('.modal')
});
我们这个
<div class="modal fade" id="createModal" role="dialog" aria-hidden="true" data-backdrop="">
<div class="modal-dialog modal-dialog-centered modal-lg" role="document">
<div class="modal-content">
并使用此
【讨论】：
这里的所有答案都不适合我，但这个很好：
$('#modal-window').on('shown.bs.modal', function (e) {
$("#select-box").select2({
placeholder: "Select...",
theme: "bootstrap",
language: "en"
});
})
把它包起来
$(document).on('ready turbolinks:load', function() {...}
如果你使用 turbolink。
【讨论】：
只需使用数据属性设置： data-dropdown-parent="#bs-modal-id"
<select class="form-control" data-dropdown-parent="#bs-modal-id"></select>
【讨论】：
找到问题了！
其实我是在按钮上使用 html 属性打开模式
data-target="#modalAttachment"
虽然我应该使用 javascript 代码打开模式以使 enforceFocus 更改生效
当我开始使用它打开模式时，enforceFocus 函数改变了工作
$('#modalAttachment').modal('show');
谢谢！
【讨论】：