Select2 funktioniert nicht, wenn es in ein Bootstrap-Modal eingebettet ist

Wenn ich eine select2 (Eingabe) im Bootstrap-Modal verwende, kann ich nichts eingeben. Es ist wie behindert? Außerhalb des Modals funktioniert select2 einwandfrei.

Arbeitsbeispiel: http://jsfiddle.net/byJy8/1/ code:

<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">Panel</h3>
  </div>
  <div class="modal-body" style="max-height: 800px">


<form class="form-horizontal">

<!-- Text input-->
<div class="control-group">
  <label class="control-label" for="vdn_number">Numer</label>
  <div class="controls">
     <!-- seleect2 -->
    <input name="vdn_number" type="hidden" id="vdn_number"  class="input-large" required=""  />
  </div>
</div>

  </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    <button class="btn btn-primary">Save changes</button>
  </div>
</div>

und js:

$("#vdn_number").select2({
    placeholder: "00000",
    minimumInputLength: 2,
    ajax: {
        url: "getAjaxData/",
        dataType: 'json',
        type: "POST",
        data: function (term, page) {
            return {
                q: term, // search term
                col: 'vdn'
            };
        },
        results: function (data) { // parse the results into the format expected by Select2.
            // since we are using custom formatting functions we do not need to alter remote JSON data
            return {results: data};
        }
    }
});

Antworten:

Hier finden Sie eine schnelle Lösung

und hier ist 'der richtige Weg': Select2 funktioniert nicht, wenn es in ein Bootstrap-Modal eingebettet ist

Ok, ich muss es funktionieren lassen.

Veränderung

<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">Panel</h3>
  </div>
  <div class="modal-body" style="max-height: 800px">

zu

<div id="myModal" class="modal hide fade" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">Panel</h3>
  </div>
  <div class="modal-body" style="max-height: 800px">

(entferne tabindex = "- 1" aus modal)

Für Select2 v4:

Verwenden Sie dropdownParentdiese Option, um das Dropdown-Menü an den modalen Dialog und nicht an den HTML-Text anzuhängen.

<!-- 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>

Dadurch wird das Select2-Dropdown-Menü angehängt, sodass es in das DOM des Modals und nicht in den HTML-Body (Standard) fällt. Siehe https://select2.org/dropdown#dropdown-placement

Ich habe auf github für select2 eine Lösung dafür gefunden

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

Für Bootstrap 3 lautet die Lösung:

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

Bootstrap 4 hat die enforceFocusMethode in umbenannt _enforceFocus, daher müssen Sie diese stattdessen patchen:

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

Erklärung vom obigen Link kopiert:

Bootstrap registriert einen Listener für das Focusin-Ereignis, der prüft, ob das fokussierte Element entweder das Overlay selbst oder ein Nachkomme davon ist - wenn nicht, konzentriert es sich nur auf das Overlay. Da das Dropdown-Menü select2 an den Text angehängt ist, können Sie effektiv nichts in das Textfeld eingeben.

Sie können dies schnell beheben, indem Sie die Funktion assertceFocus überschreiben, die das Ereignis auf dem Modal registriert

Einfach entfernen tabindex="-1"und Stil hinzufügenoverflow:hidden

Hier ist ein Beispiel:

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

Dies ist meine Lösung mit select2 4.0.0. Überschreiben Sie einfach das CSS direkt unter dem Import von select2.css. Bitte stellen Sie sicher, dass der Z-Index größer ist als Ihr Dialog oder Modal. Ich füge nur 2000 zu den Standard hinzu. Weil der Z-Index meiner Dialoge ungefähr 1000 ist.

Legen Sie das Dropdown-Element fest. Ich musste es auf .modal-content innerhalb des Modals setzen, sonst würde der Text zentriert enden.

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

Die Antwort, die für mich funktioniert hat, finden Sie hier: https://github.com/select2/select2-bootstrap-theme/issues/41

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

Auch muss das nicht entfernt werden tabindex.

Laut der offiziellen select2-Dokumentation tritt dieses Problem auf, weil Bootstrap-Modale dazu neigen, anderen Elementen außerhalb des Modals den Fokus zu stehlen.

Standardmäßig fügt Select2 das Dropdown-Menü dem Element hinzu und es wird als "außerhalb des Modals" betrachtet.

Fügen Sie stattdessen das Dropdown-Menü mit der Einstellung dropdownParent an das Modal selbst an:

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

Siehe Referenz: https://select2.org/troubleshooter/common-problems

Ich hatte das gleiche Problem, ein Update z-indexfür .select2-containersollte den Trick machen. z-indexStellen Sie sicher, dass Ihr Modal niedriger ist als das von select2.

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

Aktualisiert: Falls der obige Code nicht richtig funktioniert, entfernen Sie auch tabindexes aus Ihrem Modal, wie von @breq vorgeschlagen

Verwenden Sie diesen Code nur in Document.read ()

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

Dieses Problem hat sich bei der Arbeit mit der Single Jquery-Funktion gelöst

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

Ändern Sie die Datei select2.css

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

zu

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

Nur um besser zu verstehen, wie Tabindex-Elemente funktionieren, um die akzeptierte Antwort zu vervollständigen:

Das globale Attribut tabindex ist eine Ganzzahl, die angibt, ob das Element den Eingabefokus übernehmen kann (fokussierbar ist), ob und an welcher Position es an der sequentiellen Tastaturnavigation teilnehmen soll. Es kann mehrere Werte annehmen:
  - Ein negativer Wert bedeutet, dass das Element fokussierbar sein sollte, aber nicht über die sequentielle Tastaturnavigation erreichbar sein sollte.
  -0 bedeutet, dass das Element über die sequentielle Tastaturnavigation fokussierbar und erreichbar sein sollte, seine relative Reihenfolge jedoch durch die Plattformkonvention definiert ist.
  -Ein Mittel mit positivem Wert sollte über die sequentielle Tastaturnavigation fokussierbar und erreichbar sein. Seine relative Reihenfolge wird durch den Wert des Attributs definiert: Die Folgen folgen der zunehmenden Anzahl des Tabindex. Wenn mehrere Elemente denselben Tabindex verwenden, folgt ihre relative Reihenfolge ihrer relativen Position im Dokument.

von: Mozilla Devlopper Network

Wenn Sie ein Problem mit dem haben iPad - Tastatur , die sich verstecken , die Bootstrap - modal , während auf dem Klick select2 Eingang, können Sie dies beheben , indem Sie die folgende Regel Zugabe nach der Initialisierung des select2Eingangs:

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
}

Entnommen aus https://github.com/angular-ui/bootstrap/issues/1812#issuecomment-135119475

BEARBEITEN: Wenn Ihre Optionen nicht richtig angezeigt werden, müssen Sie das dropdownParentAttribut beim Initialisieren verwenden select2:

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

Viel Glück (:

Basierend auf der Antwort von @pymarco habe ich diese Lösung geschrieben. Sie ist nicht perfekt, löst jedoch das Select2-Fokusproblem und behält die Tab-Sequenz bei, die innerhalb von Modal funktioniert

    $.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))
    }

In meinem Fall hatte ich das gleiche Problem mit zwei Modalen und alles wurde gelöst mit:

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

Wie in der Projektausgabe Nr. 41 sagte ein Benutzer.

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

Dieser Code funktioniert. Vielen Dank.

Okay, ich weiß, dass ich zu spät zur Party komme. Aber lassen Sie mich mit Ihnen teilen, was für mich funktioniert hat. Die Tabindex- und Z-Index-Lösungen haben bei mir nicht funktioniert.

Das Festlegen des übergeordneten Elements des select-Elements funktionierte gemäß den allgemeinen Problemen, die auf der select2-Site aufgeführt sind.

Wenn Sie jquery mobile popup verwenden, müssen Sie die Funktion _handleDocumentFocusIn neu schreiben:

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

Ich habe das gleiche Problem mit dem select2In bootstrap modal, und die Lösung bestand darin, das overflow-y: auto;und zu entfernen overflow: hidden. von .modal-openund.modal classes

Hier ist das Beispiel für die jQueryEntfernung von overflow-y:

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

Ich hatte dieses Problem schon einmal, ich benutze yii2 und ich habe es auf diese Weise gelöst

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

Ich hatte ein halbbezogenes Problem in einer Anwendung, also werde ich mein 2c einfügen.

Ich habe mehrere Modalitäten mit Formularen, die select2-Widgets enthalten. Das Öffnen von Modal A und eines weiteren Modals in Modal A würde dazu führen, dass select2-Widgets in Modal B verschwinden und nicht initialisiert werden können.

Jedes dieser Modalitäten lud die Formulare über Ajax.

Die Lösung bestand darin, die Formulare beim Schließen eines Modals aus dem Dom zu entfernen.

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

$('.modal').on('shown.bs.modal', function (e) {
    $(this).find('.select2me').select2({
        dropdownParent: $(this).find('.modal-content')
    });
})

Ich habe dies allgemein in meinem Projekt gelöst, indem ich die select2-funktion überladen habe . Jetzt wird geprüft, ob kein dropdownParent vorhanden ist und ob die Funktion für ein Element aufgerufen wird, das ein übergeordnetes Element des Typs hat div.modal. In diesem Fall wird dieses Modal als übergeordnetes Element für die Dropdown-Liste hinzugefügt.

Auf diese Weise müssen Sie es nicht jedes Mal angeben, wenn Sie ein select2-Eingabefeld erstellen.

(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);
    };
    // Copy all properties of the old function to the new
    for (var key in oldSelect2) {
        jQuery.fn.select2[key] = oldSelect2[key];
    }
})();

Ich bekomme es einfach zum Laufen , indem ich select2.min.css einbinde

Probieren Sie es aus

Mein modales HTML von Bootstrap 3 ist

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

Sie können den select2-Trigger in Ihrem $ (Dokument) erneut aufrufen.

$(".select2").select2({ 
                width: '120' 
            });

Um Bootstrap 4.0 serverseitig zu verwenden (Ajax- oder JSON-Daten inline), müssen Sie Folgendes hinzufügen:

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

Wenn dann Modal geöffnet ist, erstellen Sie select2:

  // when modal is open
  $('.modal').on('shown.bs.modal', function () {
            $('select').select2({
                  // ....
            });
  });

In meinem Fall habe ich das gemacht und es funktioniert. Ich benutze Bundle, um es zu laden und in diesem Fall hat es für mich funktioniert

 $(document).on('select2:select', '#Id_Producto', function (evt) {
   // Here your code...
  });