バニラ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側での指定は不要。
関連記事
-
-
円形のプログレスバーをprogressbar.jsで実装する方法
円形のプログレスバーを実装したかった。CSSだったり画像を用いたりする方法もあっ ...
-
-
ページ内のスクロールバーを見やすく且つ異なるブラウザ間でも同じデザインにする「SimpleBar」ライブラリの利用方法
CSSのoverflowでスクロールバーを設置した際、ブラウザによってデザイン( ...
-
-
ローソク足のグラフをJavaScriptで描写する方法(highstock)
株価か仮想通貨などの値動き(チャート)を図表とするローソク足のグラフを何らかの方 ...
-
-
Push.jsを用いてプッシュ通知を実装&Web Audio APIで通知音も鳴らす方法
プッシュ通知(デスクトップ通知)を実装してみたい。また、通知の際は分かりやすいよ ...
-
-
バニラJavaScript対応の日時ピッカー「Flatpickr」ライブラリの利用方法
サイト内に日時ピッカーを実装する場合、jQueryの「DateTimePicke ...