384

ブートストラップ モーダルで 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>
      </form>    
    </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は機能しません

4

34 に答える 34

671

わかりました、私はそれを働かせました。

変化する

<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"を削除 )

于 2013-08-28T12:07:07.490 に答える
299

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を参照してください

于 2015-11-24T01:53:17.207 に答える
39 
.select2-close-mask{
    z-index: 2099;
}
.select2-dropdown{
    z-index: 3051;
}

これは、select2 4.0.0 を使用した私のソリューションです。select2.css インポートのすぐ下にある css を上書きするだけです。z-index がダイアログまたはモーダルより大きいことを確認してください。デフォルトのものに2000を追加するだけです。私のダイアログの z-index は約 1000 です。

于 2015-05-06T08:25:27.323 に答える
5

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

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

に

z-index: 10000;
...
z-index: 10001;
...
z-index: 10002;
于 2014-02-12T08:48:18.580 に答える
3

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

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

次に、モーダルが開いているときに、select2 を作成します。

  // when modal is open
  $('.modal').on('shown.bs.modal', function () {
            $('select').select2({
                  // ....
            });
  });
于 2020-06-11T19:29:52.800 に答える
2 
$("#IlceId").select2({
    allowClear: true,
    multiple: false,
    dropdownParent: $("#IlceId").parent(),
    escapeMarkup: function (m) {
        return m;
    },
});

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

于 2017-12-19T08:16:54.913 に答える
2

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

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

于 2018-07-02T11:30:17.380 に答える
1

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

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

于 2015-04-16T14:57:59.570 に答える