Select2在bootstrap模式中不起作用

Question

我正在尝试使用select2内部引导模式但它不会自动获得焦点以及向下和向上箭头不适用于填充列表.

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

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

嵌入在引导模式中时,Select2不起作用

我实现了它的两个解决方案

1. tabindex从模态弹出窗口中删除.
2. enforceFocusmodal.js文件中注释的函数代码.

但它仍然无法正常工作!知道我还能错过什么吗？

EDIT1

它适用于firefox何时tabindex从模态div中删除但不是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

使用下面的代码。这将解决您的错误。

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

Answer 3

我变了：

<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"从元素中删除属性。