Select2 не работает, когда встроен в модал начальной загрузки

Для Select2 v4:

Используйте dropdownParent чтобы прикрепить раскрывающийся список к модальному диалоговому окну, а не к телу HTML.

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <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">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        <select id="select2insidemodal" multiple="multiple">
          <option value="AL">Alabama</option>
            ...
          <option value="WY">Wyoming</option>
        </select>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>


<script>

$(document).ready(function() {
  $("#select2insidemodal").select2({
    dropdownParent: $("#myModal")
  });
});

</script>

Это добавит выпадающее меню Select2, чтобы оно попадало в DOM модального, а не на тело HTML (по умолчанию). См. Https://select2.org/dropdown#dropdown-placement

Я нашел решение для этого на github для select2

https://github.com/ivaynberg/select2/issues/1436

Для бутстрапа 3 решение:

$.fn.modal.Constructor.prototype.enforceFocus = function() {};

Bootstrap 4 переименовал метод enforceFocus в _enforceFocus, поэтому вам нужно будет исправить это:

$.fn.modal.Constructor.prototype._enforceFocus = function() {};

Объяснение скопировано из приведенной выше ссылки:

Bootstrap регистрирует слушателя в событии focusin, который проверяет, является ли сфокусированный элемент либо самим наложением, либо его потомком, если он не перефокусируется на наложении. С выпадающим списком select2, прикрепленным к телу, это фактически мешает вам вводить что-либо в текстовое поле.

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

Просто удалите tabindex="-1" и добавьте overflow:hidden стиля overflow:hidden

Вот пример:

<div id="myModal" class="modal fade" role="dialog" style="overflow:hidden;">
    <!---content modal here -->
</div>

.select2-close-mask{
    z-index: 2099;
}
.select2-dropdown{
    z-index: 3051;
}

Это мое решение с select2 4.0.0. Просто переопределите css прямо под import select2.css. Убедитесь, что z-индекс больше, чем ваш диалог или модальный. Я просто добавляю 2000 по умолчанию. Потому что z-index моих диалогов составляет около 1000.

Ответ, который работал для меня, был найден здесь: https://github.com/select2/select2-bootstrap-theme/issues/41

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

Также не требуется удаление tabindex.

Jus использует этот код в Document.read()

$.fn.modal.Constructor.prototype.enforceFocus = function () {};

У меня была та же проблема, обновление z-index для .select2-container должно сделать трюк. Убедитесь, что ваш модальный z-index меньше, чем select2.

.select2-container {
    z-index: 99999;
}

Обновлено: В случае, если выше код не работает должным образом, также удалите tabindexes из вашего модального, как показано в @breq

изменить файл select2.css

z-index: 9998;
...
z-index: 9999;
...
z-index: 10000;

к

z-index: 10000;
...
z-index: 10001;
...
z-index: 10002;

Чтобы лучше понять, как работают элементы tabindex, чтобы завершить принятый ответ:

Глобальный атрибут tabindex представляет собой целое число, указывающее, может ли элемент принимать фокус ввода (фокусируется), если он должен участвовать в последовательной навигации по клавиатуре, и если да, то в какой позиции. Это может принимать несколько значений:
-a отрицательное значение означает, что элемент должен быть фокусируемым, но не должен достижимо посредством последовательной навигации по клавиатуре;
-0 означает, что элемент должен быть сфокусирован и доступен с помощью последовательной навигации по клавиатуре, но его относительный порядок определяется соглашением о платформе;
-a значение положительного значения должно быть настраиваемым и достижимым посредством последовательной навигации по клавиатуре; его относительный порядок определяется значением атрибута: последовательные следуют за увеличением числа tabindex. Если несколько элементов имеют один и тот же tabindex, их относительный порядок следует за их относительным положением в документе.

от: Mozilla Devlotper Network

Основываясь на ответе @pymarco, я написал это решение, оно не идеально, но решает проблему выбора select2 и поддерживает последовательность вкладок, работающих внутри модальных

    $.fn.modal.Constructor.prototype.enforceFocus = function () {
        $(document)
        .off('focusin.bs.modal') // guard against infinite focus loop
        .on('focusin.bs.modal', $.proxy(function (e) {
            if (this.$element[0] !== e.target && !this.$element.has(e.target).length && !$(e.target).closest('.select2-dropdown').length) {
                this.$element.trigger('focus')
            }
        }, this))
    }

Эта проблема, связанная с работой для одной функции JQuery

$('#myModal .select2').each(function() {  
   var $p = $(this).parent(); 
   $(this).select2({  
     dropdownParent: $p  
   });  
});

Хорошо, я знаю, что опаздываю на вечеринку. Но позвольте мне поделиться с вами тем, что сработало для меня. Решения tabindex и z-index не работали для меня.

Установка родителя элемента select работала в соответствии с общими проблемами, перечисленными на сайте select2.

Если у вас возникла проблема с клавиатурой iPad, которая скрывает мода загрузки при нажатии на вход select2, вы можете решить эту проблему, добавив следующее правило после инициализации входа select2:

if (navigator.userAgent.match(/iPhone|iPad|iPod/i)) {
   var styleEl = document.createElement('style'), styleSheet;
   document.head.appendChild(styleEl);
   styleSheet = styleEl.sheet;
   styleSheet.insertRule(".modal { position:absolute; bottom:auto; }", 0);
   document.body.scrollTop = 0; // Only for Safari
}

Взято из https://github.com/angular-ui/bootstrap/issues/1812#issuecomment-135119475

EDIT: Если ваши параметры не отображаются правильно, вам нужно использовать атрибут dropdownParent при инициализации select2:

$(".select2").select2({
    dropdownParent: $("#YOURMODALID")
});

Удачи (:

Если вы используете всплывающее окно jquery mobile, вы должны переписать функцию _handleDocumentFocusIn:

$.mobile.popup.prototype._handleDocumentFocusIn = function(e) {
  if ($(e.target).closest('.select2-dropdown').length) return true;
}

Я решил это, как правило, в своем проекте, перегрузив select2 -function. Теперь он будет проверять, нет ли dropdownParent и вызывается ли функция для элемента, у которого есть родительский тип типа div.modal. Если это так, он добавит этот модальный как родительский для выпадающего.

Таким образом, вам не нужно указывать его каждый раз, когда вы создаете select2-input-box.

(function(){
    var oldSelect2 = jQuery.fn.select2;
    jQuery.fn.select2 = function() {
        const modalParent = jQuery(this).parents('div.modal').first();
        if (arguments.length === 0 && modalParent.length > 0) {
            arguments = [{dropdownParent: modalParent}];
        } else if (arguments.length === 1
                    && typeof arguments[0] === 'object'
                    && typeof arguments[0].dropdownParent === 'undefined'
                    && modalParent.length > 0) {
            arguments[0].dropdownParent = modalParent;
        }
        return oldSelect2.apply(this,arguments);
    };
})();

$("#IlceId").select2({
    allowClear: true,
    multiple: false,
    dropdownParent: $("#IlceId").parent(),
    escapeMarkup: function (m) {
        return m;
    },
});

этот код работает. Спасибо.

У меня была эта проблема раньше, я использую yii2, и я решил ее таким образом

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

У меня такая же проблема с select2 в bootstrap modal, и решение заключалось в удалении overflow-y: auto; и overflow: hidden; от .modal-open и .modal classes

Вот пример использования jQuery для удаления overflow-y:

$('.modal').css('overflow-y','visible');
$('.modal').css('overflow','visible');

Установите dropdownParent. Я должен был установить его на .modal-content в модальном режиме, иначе текст окажется по центру.

$("#product_id").select2({
    dropdownParent: $('#myModal .modal-content')
});

У меня была проблема с полузадачей в приложении, поэтому я поставлю свой 2c.

У меня есть несколько модалов с формами, содержащими виджеты select2. Открытие модального A, а затем другого модального внутри модального A приведет к исчезновению виджета select2 внутри модального B и не инициализации.

Каждый из этих модалей загружал формы через ajax.

Решение заключалось в том, чтобы удалить формы из dom при закрытии модального.

$(document).on('hidden.bs.modal', '.modal', function(e) {
    // make sure we don't leave any select2 widgets around 
    $(this).find('.my-form').remove();
});

Я просто заработал, включив select2.min.css

Попробуйте

Мой модальный html бутстрапа 3

<div id="changeTransportUserRequestPopup" class="modal fade" role="dialog">
    <div class="modal-dialog" style="width: 40%!important; ">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h3>Warning</h3>
            </div>
            <div class="modal-body" id="changeTransportUserRequestPopupBody">
                <select id="cbTransport" class="js-example-basic-single" name="cbTransport" style="width:100%!important;"></select>
            </div>
            <div class="modal-footer">
                <button id="noPost" class="btn btn-default" name="postConfirm" value="false" data-dismiss="modal">Cancel</button>
                <button type="submit" id="yesChangeTransportPost" class="btn btn-success" name="yesChangeTransportPost" value="true" data-dismiss="modal">Yes</button>
            </div>
        </div>
    </div>
</div>

Просто FYI, вы также можете попробовать загрузить select2 поздно, чтобы заставить его работать:

setTimeout(function () {$('select').select2();}, 300);