[select2]上手く動作しない時のメモ[dialog]

お久しぶりです。

jquery(3.x.x)、Bootstrap(4.x.x)とSelect2(4.x)プラグインを利用してmodalを表示。
この時にselectタグにselect2を充てる・・・
しかし、うまくoptionタグ部分のリストと絞り込みの部分が表示されないという現象になりました。

色々ググるとz-indexがどうとかあってとりあえず、z-indexを変更してみたら表示はされるけど絞り込みの部分が反応しないという感じでダメでした。

さらにさらにググると、ちゃんとマニュアル読めよ的な事が書かれていたところを見つけ、その通りにすることで、正しく機能するようになりました。

実際に行ったことは、select2のオプションにdropdownParent:modalのidなどを指定

(https://select2.org/configuration/options-api)
以下、例

<a href="#" class="btn">modal open</a>
<div id="modal">
・・・
<select name="hoge">・・・</select>
・・・
</div>
<script>
$(function(){
    $(document).on("click",".btn",function(){
        $("#modal").modal();
    });
    $("[name=hoge]").select2({"dropdownParent":"#modal"});
});
</script>
スポンサーリンク

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください