Select2がブートストラップモーダルに埋め込まれていると機能しない

ブートストラップモーダルでselect2（入力）を使用すると、何も入力できません。それは無効のようなものですか？モーダルの外側ではselect2は正常に動作します。

作業例：http : //jsfiddle.net/byJy8/1/ コード：

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

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

答え：

ここでは、クイックフィックスを見つけることができます

そしてこれが「正しい方法」です：Select2はブートストラップモーダルに埋め込まれると機能しません

わかりました。

変化する

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

に

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

（モーダルからtabindex = "-1"を削除 ）

Select2 v4の場合：

dropdownParentHTMLボディではなく、モーダルダイアログにドロップダウンを添付するために使用します。

<!-- 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ドロップダウンがアタッチされ、HTMLボディ（デフォルト）ではなく、モーダルのDOM内に配置されます。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() {};

上のリンクからコピーされた説明：

ブートストラップは、フォーカスされた要素がオーバーレイ自体であるか、その子孫であるかを確認する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での私のソリューションです。select2.cssインポートのすぐ下のcssをオーバーライドするだけです。Z-indexがダイアログまたはモーダルより大きいことを確認してください。デフォルトのものに2000を追加するだけです。ダイアログのZインデックスが約1000であるためです。

dropdownParentを設定します。モーダル内の.modal-contentに設定する必要がありました。そうしないと、テキストが中央に配置されてしまいます。

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

私のために働いた答えはここにあります：https：//github.com/select2/select2-bootstrap-theme/issues/41

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

また、を削除する必要はありませんtabindex。

公式のselect2ドキュメントによると、この問題は、Bootstrapモーダルがモーダル外の他の要素からフォーカスを奪う傾向があるために発生します。

デフォルトでは、Select2はドロップダウンメニューを要素に添付し、「モーダルの外側」と見なされます。

代わりに、dropdownParent設定を使用して、ドロップダウンをモーダル自体にアタッチします。

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

リファレンスを参照してください：https : //select2.org/troubleshooting/common-problems

私は更新し、同じ問題を持っていたz-indexために.select2-containerトリックを行う必要があります。モーダルz-indexがselect2よりも低いことを確認してください。

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

更新：上記のコードが正しく機能しない場合は、@ breqが提案したように、モーダルからtabindexesも削除します

JusはDocument.read（）でこのコードを使用します

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

この問題は私にとって単一のjquery関数

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

select2.cssファイルを変更する

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

に

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

受け入れられた回答を完了するためにtabindex要素がどのように機能するかをよりよく理解するために：

tabindexグローバル属性は、要素が入力フォーカスを取得できるか（フォーカス可能か）、順次キーボードナビゲーションに参加する必要があるかどうか、参加できる場合はどの位置にあるかを示す整数です。複数の値をとることができ
  。-負の値は、要素はフォーカス可能であるべきですが、順次キーボードナビゲーションを介して到達可能であってはならないことを意味します。
  -0は、要素がフォーカス可能であり、順次キーボードナビゲーションを介して到達可能であることを意味しますが、その相対的な順序はプラットフォームの規則によって定義されます。
  -正の値は、順次キーボードナビゲーションを介してフォーカスおよび到達可能であることを意味します。その相対的な順序は、属性の値によって定義されます。タブインデックスの増加する番号に順次従います。複数の要素が同じtabindexを共有する場合、それらの相対的な順序はドキュメント内の相対的な位置に従います。

から：Mozilla Devlopper Network

あなたはに問題がある場合の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から取得

編集：オプションが適切に表示されない場合はdropdownParent、初期化時に属性を使用する必要がありますselect2：

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

幸運を （：

私がこのソリューションを書いた@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))
    }

私の場合、2つのモーダルで同じ問題が発生し、すべてを使用して解決しました：

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

プロジェクトの問題＃41のように、ユーザーが言った。

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

このコードは機能しています。ありがとうございました。

さて、私はパーティーに遅れていることを知っています。しかし、私にとって何がうまくいったかをあなたと共有させてください。tabindexとz-indexソリューションは私にとってはうまくいきませんでした。

select要素の親の設定は、select2サイトにリストされている一般的な問題に従って機能しました。

jqueryモバイルポップアップを使用する場合は、_handleDocumentFocusIn関数を書き換える必要があります。

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

select2inにも同じ問題がbootstrap modalあり、解決策はoverflow-y: auto;and を削除すること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;

アプリケーションに準関連の問題があったので、2cに入れます。

select2ウィジェットを含むフォームを持つ複数のモーダルがあります。モーダルA、次にモーダルA内の別のモーダルを開くと、モーダルB内のselect2ウィジェットが表示されなくなり、初期化に失敗します。

これらの各モーダルは、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();
});

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

私は通常、プロジェクトで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);
    };
    // Copy all properties of the old function to the new
    for (var key in oldSelect2) {
        jQuery.fn.select2[key] = oldSelect2[key];
    }
})();

select2.min.cssをインクルードするだけで機能します

試してみる

ブートストラップ3の私のモーダルhtmlは

<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トリガーを呼び出すことができます

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

ブートストラップ4.0をサーバー側（ajaxまたはjsonデータインライン）で使用するには、次のすべてを追加する必要があります。

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

モーダルが開いたら、select2を作成します。

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

私の場合、私はこれをしました、そしてそれは働きます。私はそれをロードするためにバンドルを使用し、この場合それは私のために働いた

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