バニラJavaScriptでリッチなセレクトメニュー(プルダウン)を実装できる「Choices.js」の利用方法
サジェストや複数選択等、機能付きのセレクトメニュー(プルダウン)を実装する際、今まではjQueryプラグインの「select2」を使っていたがバニラJavaScriptで同じような機能を実装したいケースがあった。探したところ「Choices.js」が良さそう。以下に実装方法をメモ。
目次
Choices.js
公式サイト
https://choices-js.github.io/Choices/
GitHub
https://github.com/Choices-js/Choices
CDN
CDNで使う場合は以下を記述する。
<link rel="stylesheet" href="https://choices-js.github.io/Choices/assets/styles/base.min.css"> <link rel="stylesheet" href="https://choices-js.github.io/Choices/assets/styles/choices.min.css"> <script src="https://choices-js.github.io/Choices/assets/scripts/choices.js"></script>
サンプル
https://taitan916.info/sample/Choices.js/
実装方法
ソースコード
<div class="section"> <div>オプション指定なし</div> <select class="choices_1"> <option value="">選択してください</option> <option value="1">大トロ</option> <option value="2">マグロ</option> <option value="3">ねぎとろ</option> <option value="4">中トロ</option> <option value="5">サーモン</option> </select> </div> <div class="section"> <div>複数選択可</div> <select class="choices_2" multiple> <option value="">選択してください</option> <option value="1">大トロ</option> <option value="2">マグロ</option> <option value="3">ねぎとろ</option> <option value="4">中トロ</option> <option value="5">サーモン</option> </select> </div> <div class="section"> <div>複数選択可&ページ表示時にサーモンを選択済み</div> <select class="choices_3" multiple> <option value="1">大トロ</option> <option value="2">マグロ</option> <option value="3">ねぎとろ</option> <option value="4">中トロ</option> <option value="5" selected>サーモン</option> </select> </div> <link rel="stylesheet" href="https://choices-js.github.io/Choices/assets/styles/base.min.css"> <link rel="stylesheet" href="https://choices-js.github.io/Choices/assets/styles/choices.min.css"> <style> body{ background-color: initial; } .choices__list--multiple .choices__item, .choices__list--multiple .choices__item.is-highlighted { background-color: #aaa; border: 1px solid #aaa; border-radius: 4px; } .choices[data-type*="select-multiple"] .choices__button, .choices[data-type*="text"] .choices__button{ border-left: 1px solid #aaa; } .choices__input{ width: initial !important; } </style> <script src="https://choices-js.github.io/Choices/assets/scripts/choices.js"></script> <script> const option = { removeItemButton: true, //削除ボタン表示 maxItemCount: 3, //最大選択可能数 maxItemText: (maxItemCount) => { //最大選択可能数に達した場合のメッセージ return `最大${maxItemCount}つまで選択可`; }, itemSelectText: `クリックで選択`, }; const choices_1 = new Choices(document.querySelector('.choices_1'), option); const choices_2 = new Choices(document.querySelector('.choices_2'), option); const choices_3 = new Choices(document.querySelector('.choices_3'), option); </script>
解説等
base.cssについて
base.cssはbodyのbackground-color等、セレクトメニュー以外の部分もCSSが指定されているため、別途CSSを追記していく必要がありそう。そのためインラインで色々CSSを指定している。
ページ表示時に選択済みにしたい場合
選択済みにしたいoptionタグに対してselectedを付与すること。JavaScript側での指定は不要。
関連記事
-
-
バニラJavaScript対応の日時ピッカー「Flatpickr」ライブラリの利用方法
サイト内に日時ピッカーを実装する場合、jQueryの「DateTimePicke ...
-
-
JavaScriptの日時・時刻用ライブラリ「Day.js」の利用方法について
JavaScriptの日時・時刻用を取り扱う際、PHPと比べると(個人的には)使 ...
-
-
JavaScriptのHTTPクライアントライブラリ「AXIOS」の使い方
あるサイトのソースコードを拝見しているとAXIOSというJSファイルをCDN呼び ...
-
-
バニラJS対応(jQuery非依存)の画像遅延読み込みプラグイン「echo.js」の利用方法
あるサイトをブラウザの開発者ツールで見ていると「echo.js」と聞いたことの無 ...
-
-
ブラウザ上で画像の切り抜き等編集を行う方法(Cropper.js)
あるサイトで画像をアップロードし、その画像に対してブラウザ上で切り抜き等トリミン ...