BootstrapのモーダルでSelect2をきちんと表示させる(NPMを使う場合)

# 最初に結論
```scss:scss
@import "bootstrap/scss/bootstrap";
@import "select2";

```

```js:js
import '../scss/styles.scss'
import * as bootstrap from 'bootstrap'  // <- js内で使わないのであれば不要

import jQuery from 'jquery';            // <- 依存関係のjQueryをインポートする
import select2 from 'select2'           // <- Select2をインポートする

window.$ = jQuery                       // <- '$'をjQueryとして使用する
window.jQuery = jQuery                  // <- 'jQuery'をjQueryとして使用する

select2($)                              // <- Select2が使用するjQueryを指定する

$(function () {
    $('Select2を使用するselect要素のセレクタ').select2({
        dropdownParent: $('select要素を入れるモーダルのセレクタ')
    })
})

```


# NPMを使う場合の手順が知りたい

CDNを使う記事はすでにたくさんあったので、NPMを使って開発する場合のメモです。

https://getbootstrap.jp/docs/5.3/getting-started/vite/

この記事に基づいてセッティングを進め、その中でSelect2を使用するための補足をメモします。

# jQuery, Select2のパッケージを追加

インストール
```
$ npm install jquery select2 --save
```

# css, jsに追加する部分

```src/scss/styles.scss```にSelect2のcssをインポートする
```scss:styles.scss
@import "bootstrap/scss/bootstrap";
@import "select2";    // <- 追加
```

```src/js/main.js```にSelect2のライブラリをインポートする
```js:main.js
import '../scss/styles.scss'
import * as bootstrap from 'bootstrap'

// ここから追加
import jQuery from 'jquery';
import select2 from 'select2'

window.$ = jQuery
window.jQuery = jQuery

select2($)
// ここまで追加
```

# HTMLで使う

```src/index.html```の例
```html:index.html
<!doctype html>
<html lang="ja">

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Bootstrap w/ Vite</title>
        <script type="module" src="./js/main.js"></script>
    </head>

    <body>
        <div class="container py-4 px-3 mx-auto">
            <label for="city" class="form-label">City</label>
            <!-- このselectに適用します(id="city"で参照してます) -->
            <select class="form-select" name="city" id="city">
                <option value="1">New Delhi</option>
                <option value="2">Istanbul</option>
                <option value="3">Jakarta</option>
            </select>
        </div>
    </body>

</html>
```
optionの中身はスニペットのものをそのまま使っています。
![snippet.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2846175/53ce6ed7-0416-5b3a-60d6-7d39481074f3.png)



https://marketplace.visualstudio.com/items?itemName=AnbuselvanRocky.bootstrap5-vscode

```src/js/main.js```に以下を追加する
```js:main.js
$(function () {
    $('#city').select2()
})
```

# 見た目

![localhost_8080_.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2846175/07b89557-2d2e-7ce6-f569-4c3cad7f5438.png)

いい感じ？

# モーダルに表示するには？

以下のようなモーダルの中にあるselectにはそのままだと上手く表示されません。
```html:index.html
<!-- モーダルを表示するボタン -->
<button type="button" class="btn btn-primary btn-lg" data-bs-toggle="modal" data-bs-target="#modalId">
    Launch
</button>

<!-- モーダル -->
<div class="modal fade" id="modalId" tabindex="-1" role="dialog" aria-labelledby="modalTitleId"
    aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalTitleId">
                    Modal title
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">

                <label for="city" class="form-label">City</label>
                <!-- このselectに適用します(id="city"で参照してます) -->
                <select class="form-select" name="city" id="city">
                    <option value="1">New Delhi</option>
                    <option value="2">Istanbul</option>
                    <option value="3">Jakarta</option>
                </select>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                    Close
                </button>
                <button type="button" class="btn btn-primary">Save</button>
            </div>
        </div>
    </div>
</div>
```
![modal1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2846175/d8cbb87c-9bcf-8cb0-5ab3-ce51b38fac2d.png)

これについては公式も言及してますが、```dropdownParent```というパラメータの値を指定する必要があるそうです。

https://select2.org/troubleshooting/common-problems#select2-does-not-function-properly-when-i-use-it-inside-a-bootst

上記のようなhtmlの場合、```src/js/main.js```で以下のように指定します。
```js:main.js
$(function () {
    $('#city').select2({
        // 表示するモーダルのidを指定
        dropdownParent: $('#modalId')
    })
})
```

![modal2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2846175/c0669c43-7080-4195-065e-fdd699ec118d.png)

「bootstrap modal select2」で検索すると```tabindex="-1"```を削除すると動いた、という記事がたくさん出てきて苦労したのでここに残しておきます。