Select2 не работает внутри модального bootstrap

Я пытаюсь использовать select2 внутри bootstrap modal, но он не получает фокус автоматически, а также стрелки вниз и вверх не работают для заполненного списка.

тот же select2 работает, когда я положил его вне модального всплывающего окна.

когда я искал, я обнаружил, что многие сталкиваются с этой же проблемой и нашли этот пост

Select2 не работает при внедрении в модальный загрузочный

я реализовал оба решения от него

  1. удалены tabindex от модального всплывающего окна.
  2. прокомментировал код enforceFocus функция в модальном.файл js.

но это все еще не работает! Есть идеи, что я все еще могу упустить?

Edit1

он работает в firefox, когда tabindex удаляется из модального div, но не с IE9

Edit2

я нашел, что удаление tabindex фактически не получает признан IE9 потому что я все еще могу скрыть всплывающее окно с помощью escape-ключа в IE, но не в Firefox.

7
jquery-select2

8 ответов

поместите это где-нибудь в 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();
         }
      });
   };
14

я поменял:

<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" из элемента.

2

это сделает трюк, и это сработало для меня 

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

Я попытался установить Z-индекс для раскрывающегося списка select2, и это сработало для меня. Вот что я сделал:--2--> 

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

попробуй такое

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

использовать код ниже. Это решит вашу ошибку.

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

дорогой всем не нужно принимать tabindex=" -1 " там простое решение CSS. Здесь мы идем:

.page-body .select2-drop {z-index: 10052;}
.select2-drop-mask {z-index: 10052;}

и вы сделали. :)

0

нашел проблему!

на самом деле я открывал модальный, используя атрибуты html на кнопке, как

 data-target="#modalAttachment"

в то время как я должен использовать код javascript, чтобы открыть модальный, чтобы сделать enforceFocus изменение вступает в силу когда я начал использовать это, чтобы открыть модальное, enforceFocus функция изменена работала

$('#modalAttachment').modal('show');

спасибо!

-4