Select2 не работает при внедрении в модальный bootstrap

для 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

решение:

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

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

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

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

просто удалить tabindex="-1" и добавить стиль 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 прямо под select2.импорт css. Пожалуйста, убедитесь, что Z-индекс больше, чем ваш диалог или модальный. Я просто добавляю 2000 по умолчанию. Потому что z-индекс моих диалогов составляет около 1000.

изменить select2.css file

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

до

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

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

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

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

Jus используйте этот код в документе.читать ()

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

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

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

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

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

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

от : Сеть Mozilla Devlopper

на основе ответа @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 mobile popup, вы должны переписать функцию _handleDocumentFocusIn:

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

если у вас есть проблемы с iPad клавиатурой, которая скрыть the bootstrap modal при нажатии на 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: если ваши варианты не являются показано правильно, вы должны использовать при инициализации select2:

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

удачи (:

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

установка родительского элемента select работала в соответствии с общие проблемы перечислены на сайте select2.

у меня такая же проблема с select2 in bootstrap modal, и решение было убрать overflow-y: auto; и overflow: hidden; С .modal-open и .modal classes

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

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

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

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

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

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

Я просто заставить его работать, включая select2.минута.css

попробуйте iy out

мой модальный html bootstrap 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>

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

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

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