Bootstrap Multiselectの使い方をサンプルコード付き解説！
Bootstrapのセレクトボックスでは物足りない！そう感じたことのある人はいませんか？Bootstrap Multiselectを用いると複数選択式のセレクトボックスをよりオシャレなデザインで多機能なものを実装できます。その使い方について解説していきます。
Bootstrap Multiselectとは？
Bootstrapでもセレクトボックスは用意されていますが、Bootstrap Multiselectは複数選択式のセレクトボックスを洗練されたデザインで簡単に実装することができます。
Bootstrap Multiselectはライブラリをダウンロードして、読み込むだけで簡単に使用することが出来ます。
この記事ではBootstrap Multiselectの使い方をサンプルコード付きで解説していきます。
Bootstrap Multiselectの使い方
Bootstrap Multiselectをダウンロード
まずはBootstrap Multiselectのサイトにアクセスします。
Bootstrap Multiselectのサイトの右上「Fork me on GitHub」をクリックすることでGitHubに飛ぶことができます。
GitHubにアクセス後、Code>DownloadZIPをクリックしてzipフォルダをダウンロードします。
ダウンロードしてきたzipフォルダを解凍すると、distフォルダの中にbootstrap-multiselect.cssとbootstrap-multiselect.jsの２つのファイルをプロジェクトのフォルダ内の任意の場所に配置します。
Bootstrap Multiselectを読み込む
<!-- cssファイル -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-multiselect.css">
<!-- jsファイル -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" ></script>
<script src="js/bootstrap-multiselect.js"></script>ダウンロードしてきたBootstrap MultiselectのファイルはjQueryやBootstrapを読み込んだ後で読み込むように注意してください。
Bootstrap Multiselectを使う
index.html
<select id="multiple" class="multiple" multiple="multiple">
<option value="value1">value1</option>
<option value="value2">value2</option>
<option value="value3">value3</option>
<option value="value4">value4</option>
<option value="value5">value5</option>
</select><!-- #multiple -->index.js
$(function(){
$('#multiple').multiselect();
});HTMLで通常通りselectタグとoptionタグを準備します。selectタグの要素を取得しやすいようにid="multiple"を指定しておきます。
JavaScript(jQuery)側でselectタグの要素を取得してmultiselectメソッドを使用することで、Bootstrap Multiselectを使うことができます。
おしゃれなデザインのセレクトボックスが実装できました。デフォルトの状態でセレクトボックスの項目を選択するとチェックボックスが選択状態となり、視覚的に分かりやすくなります。
オプション
Bootstrap Multiselectではオプションを指定することができ、全選択や検索ボックスをカスタマイズすることが出来るようになります。
オプションはmultiselectメソッドの引数にオブジェクト形式で指定します。ここではいくつかのオプションを紹介します。
全選択オプション
includeSelectAllOptionオプションをtrueで有効にすることで、セレクトボックス内の選択肢の一番上にSelect allという項目が追加されてこちらを選択することで全ての選択肢を一括で選択できるようになります。
検索ボックスオプション
enableFilteringオプションをtrueで有効にすると、セレクトボックス内に検索窓が追加されます。この検索窓から文字列を入力することでその文字列を含む選択肢のみを表示する絞り込み機能を追加することが出来るようになります。
選択状態リセットオプション
includeResetOptionオプションをtrueで有効にすると、リセットボタンを追加することが出来ます。このリセットボタンは複数項目を選択時に押下すると選択していた項目を全て解除することができる機能を持っています。
resetTextオプションでリセットボタンの「Reset」という文字列を変更することもできるので、是非使ってみてください。
まとめ
Bootstrap Multiselectの使い方から一部のオプションまで紹介してきました。紹介したオプションはごく一部ですので、ぜひ公式サイトを参考にオプションを使いこなしてカスタマイズしてみてくださいね。
