Question

我正在尝试在引导模式中使用select2，但它不会自动获得焦点，而向下和向上箭头对填充列表不起作用。

当我把它放在模态弹出窗口之外时，同样的select2工作。

当我搜索时，我发现很多人都遇到了同样的问题并发现了这篇文章

Select2 doesn't work when embedded in a bootstrap modal

我实施了两个解决方案

从模态弹出框中删除tabindex。
modal.js文件中enforceFocus函数的注释代码。

但它仍然无效！知道我还能遗失什么吗？

EDIT1

当firefox从模态div移除但tabindex

IE9

EDIT2

我发现删除tabindex实际上并未被IE9识别，因为我仍然可以通过IE中的转义键隐藏弹出窗口，但不会隐藏在Firefox中。

Answer 1

将它放在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();
         }
      });
   };

Answer 2

我改变了：

<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"。

Answer 3

我尝试为select2下拉选项设置z-index，它对我有用。这是我做的：

＆＃13;

.select2-container.select2-container--default.select2-container--open  {
  z-index: 5000;
}

＆＃13;

Answer 4

试试这个

<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")});

Answer 5

使用以下代码。这将解决你的错误。

$('select').select2({
    dropdownParent: $('#my_amazing_modal')
});

Answer 6

引导程序模式中的属性tabindex ='-1'可以防止使用Tab键访问或集中模式外的任何元素。对于仅用于模式的限制选项卡，对于可访问性很有用。但是selec2创建的元素是文档的子级。您需要将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>

jsbin example

meaning of tabindex=-1

Answer 7

这样就可以了，这对我有用

$.fn.modal.Constructor.prototype.enforceFocus = $.noop;

Answer 8

亲爱的所有人都不需要参加tabindex =＆＃34; -1＆＃34;有简单的CSS解决方案。我们走了：

{{1}}

你完成了。 :)

Answer 9

$('#dropdownid').select2({
  dropdownParent: $('#modalid')
 });

上面的代码对我有用，请尝试一下。

Answer 10

我正在寻找它，并且遇到了这个：

为我准备了适用于所有select2的文档

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

来自： https://github.com/select2/select2-bootstrap-theme/issues/41

Answer 11

            },
            style: TextButton.styleFrom(
              primary: Colors.white,
              backgroundColor: Colors.teal,
              onSurface: Colors.grey,
              minimumSize: Size(MediaQuery.of(context).size.width-20,40)
            ),
            child: Text("Button")),

我们这个

$('.select2-with-search').select2({
      placeholder: 'Choose one',
      searchInputPlaceholder: 'Search options',
   dropdownParent: $('.modal')
   });

并使用这个

Select2在bootstrap模式中不起作用

13 个答案: