最初に結論
scss
@import "bootstrap/scss/bootstrap";
@import "select2";
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を使って開発する場合のメモです。
この記事に基づいてセッティングを進め、その中でSelect2を使用するための補足をメモします。
jQuery, Select2のパッケージを追加
インストール
$ npm install jquery select2 --save
css, jsに追加する部分
src/scss/styles.scssにSelect2のcssをインポートする
styles.scss
@import "bootstrap/scss/bootstrap";
@import "select2"; // <- 追加
src/js/main.jsにSelect2のライブラリをインポートする
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の例
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の中身はスニペットのものをそのまま使っています。
src/js/main.jsに以下を追加する
main.js
$(function () {
$('#city').select2()
})
見た目
いい感じ？
モーダルに表示するには？
以下のようなモーダルの中にあるselectにはそのままだと上手く表示されません。
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>
これについては公式も言及してますが、dropdownParentというパラメータの値を指定する必要があるそうです。
上記のようなhtmlの場合、src/js/main.jsで以下のように指定します。
main.js
$(function () {
$('#city').select2({
// 表示するモーダルのidを指定
dropdownParent: $('#modalId')
})
})
「bootstrap modal select2」で検索するとtabindex="-1"を削除すると動いた、という記事がたくさん出てきて苦労したのでここに残しておきます。