bootstrap-multiselect の Bootstrap 5.X 系での使用方法

bootstrap5.X系でbootstrap-multiselectを使用しようとしても動作しなかった。
うまく動作しなかった原因の調査と解決方法について書き残しておく。

davidstutz.github.io

0. 実装

bootstrap-multiselectを使用して複数選択のプルダウンを実装するには、jQueryとPopper.jsが必要。

◇実装例ーHTMLファイル

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Sample</title>
        <!-- BootstrapのCSS読み込み -->
        <link th:href="@{/webjars/bootstrap/css/bootstrap.min.css}" rel="stylesheet" >
        <link th:href="@{/webjars/bootstrap-multiselect/css/bootstrap-multiselect.min.css}" rel="stylesheet" >
        <!-- jQuery読み込み -->
        <script th:src="@{/webjars/jquery/jquery.min.js}"></script>
         <!-- Popper.js読み込み -->
        <script th:src="@{/webjars/popper.js/umd/popper.min.js}"></script>
        <!-- BootstrapのJS読み込み -->
        <script th:src="@{/webjars/bootstrap/js/bootstrap.min.js}"></script>
        <script th:src="@{/webjars/bootstrap-multiselect/js/bootstrap-multiselect.js}"></script>
    </head>
    <body>
        
        <!-- 中略 -->

        <label for="status" class="col-2 col-form-label">ステータスコード</label>
        <div class="col-2" id="pulldown">
            <select class="multiple form-select" id="status" th:field="*{status}" multiple="multiple">
                <option th:value="0" selected></option>
                <option th:value="1">申込</option>
                <option th:value="2">契約中</option>
                <option th:value="3">停止中</option>
                <option th:value="4">解約</option>
                <option th:value="5">削除</option>
            </select>
        </div>
        
        <!-- 中略 -->

    </body>
</html>

◇実装例ーJSファイル

$(function() {
    $('#status').multiselect();
});

1. Bootstrap 5.X系での動作

設定を何もしない場合はBootstrap Multiselect ver1.1.1はBootstrap 5.X系には対応しておらず、以下のように表示される。

Bootstrap 4.X系までは対応しており、正常に動作する。

2. Bootstrap 5.X系で動かない原因

2.1. プルダウンがただの四角になる原因

選択メニューのクラスが変更となったため、bootstrap-multiselect内部でプルダウンを生成している箇所が対応できていない。

Bootstrap 4.X系	Bootstrap 5.X系
form-control / custom-select	form-select

<!-- 4.X系での書き方例 -->
<select id="multiple" class="multiple form-control" multiple="multiple">
    <option value="value1">value1</option>
    <option value="value2">value2</option>
    <option value="value3">value3</option>
</select>

<!-- 5.X系での書き方例 -->
<select id="multiple" class="multiple form-select" multiple="multiple">
    <option value="value1">value1</option>
    <option value="value2">value2</option>
    <option value="value3">value3</option>
</select>

2.2. ドロップダウンメニューが表示されない原因

ドロップダウンメニューの属性が変更となったため、bootstrap-multiselectがドロップダウンメニューを生成している箇所が対応できていない。

Bootstrap 4.X系	Bootstrap 5.X系
data-toggle	data-bs-toggle

<!-- 4.X系での書き方例 -->
<div class="dropdown">
    <button type="button" class="btn btn-secondary dropdown-toggle" id="dropdownMenu" data-toggle="dropdown" aria-expanded="false">
        ドロップダウン
    </button>
    <ul class="dropdown-menu" aria-labelledby="dropdownMenu">
        <li><button type="button" class="dropdown-item">value1</button></li>
        <li><button type="button" class="dropdown-item">value2</button></li>
        <li><button type="button" class="dropdown-item">value3</button></li>
    </ul>
</div>

<!-- 5.X系での書き方例 -->
<div class="dropdown">
    <button type="button" class="btn btn-secondary dropdown-toggle" id="dropdownMenu" data-bs-toggle="dropdown" aria-expanded="false">
        ドロップダウン
    </button>
    <ul class="dropdown-menu" aria-labelledby="dropdownMenu">
        <li><button type="button" class="dropdown-item">value1</button></li>
        <li><button type="button" class="dropdown-item">value2</button></li>
        <li><button type="button" class="dropdown-item">value3</button></li>
    </ul>
</div>

3. bootstrap-multiselectのどこが動かない原因なのか

bootstrap-multiselect.jsファイル内に原因がある。

3.1. プルダウンがただの四角になる原因

jsファイル内、408行目のcustom-selectの記述が原因。
5.X系に対応するには、form-selectである必要がある。

buttonClass: 'custom-select',

3.2. ドロップダウンメニューが表示されない原因

jsファイル内、453行目のdata-toggleの記述が原因。
5.X系に対応するには、data-bs-toggleである必要がある。

button: '<button type="button" class="multiselect dropdown-toggle" data-toggle="dropdown"><span class="multiselect-selected-text"></span></button>',

Bootstrap 5.X系で動作させるための設定

$('#status').multiselect();を呼び出しているところで、buttonClassとtemplatesのdata-toggle属性名をbootstrap 5.X系に対応するものに変更する。参考　　

◇JS記述例

$('#status').multiselect({
    // buttonClassの値を「custom-select」→「form-selec」に変更
    buttonClass: 'form-select',
    templates: {
        // templatesのdata-toggle属性名を「data-bs-toggle」に変更
        button: '<button type="button" class="multiselect dropdown-toggle" data-bs-toggle="dropdown"><span class="multiselect-selected-text"></span></button>'
    }
});

JavaScriptの記述を上記のようにした場合、Bootstrap 5.X系でも正しく動作するようになった。

ぽんこつ日記

bootstrap-multiselect を Bootstrap 5.X 系で使用したい