バニラJavaScriptでリッチなセレクトメニュー(プルダウン)を実装できる「Tom Select」の利用方法
先日バニラJavaScriptでリッチなセレクトメニュー(プルダウン)を実装できる「Choices.js」の利用方法をメモしたがCSSに若干癖があった。他に似たようなライブラリが無いか探したところ「Tom Select」がCSSに癖も無く使いやすそう。以下にサンプルと利用方法をメモ。
Choices.js
公式サイト
GitHub
https://github.com/orchidjs/tom-select
CDN
CDNで使う場合は以下を記述する。
<script src="https://cdn.jsdelivr.net/npm/tom-select@2.3.1/dist/js/tom-select.complete.min.js"></script> <link href="https://cdn.jsdelivr.net/npm/tom-select@2.3.1/dist/css/tom-select.min.css" rel="stylesheet">
サンプル
https://taitan916.info/sample/tom-select/
実装方法
ソースコード
<div class="section"> <div>単一選択</div> <select class="tom_1"> <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="tom_2"> <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="tom_3"> <option value="1">大トロ</option> <option value="2">マグロ</option> <option value="3">ねぎとろ</option> <option value="4">中トロ</option> <option value="5" selected>サーモン</option> </select> </div> <style> .section{ margin: 10px 0; } </style> <script src="https://cdn.jsdelivr.net/npm/tom-select@2.3.1/dist/js/tom-select.complete.min.js"></script> <link href="https://cdn.jsdelivr.net/npm/tom-select@2.3.1/dist/css/tom-select.min.css" rel="stylesheet"> <script> const option_1 = { items: [], //ページ表示時に未選択状態 placeholder: '選択してください', //プレースホルダー hidePlaceholder: true, //1つ以上選択した場合にプレースホルダー非表示 }; const option_2 = { items: [], plugins: ['remove_button'], //未選択ボタンの表示 maxItems: 3, //最大選択数 placeholder: '選択してください', hidePlaceholder: true, }; const option_3 = { plugins: ['remove_button'], maxItems: 3, placeholder: '選択してください', hidePlaceholder: true, }; const tom_1 = new TomSelect('.tom_1', option_1); const tom_2 = new TomSelect('.tom_2', option_2); const tom_3 = new TomSelect('.tom_3', option_3); </script>
所感
「Tom Select」の方はCSSを指定しなくてもそのまま使っていけそう。またデザイン的にもこっちの方が個人的には好きかも。
関連記事
-
-
jQuery UIでカレンダーピッカー(Datepicker)の利用方法
フォーム等で日付を入力する際にカレンダーピッカー機能を実装することがある。その際 ...
-
-
JavaScriptでオブジェクトをzlib圧縮してCookieに保存できる「zcookies」ライブラリの利用方法
あるシステムでCookieを保存している部分があった。ただ、日本語を保存している ...
-
-
ページ内のスクロールバーを見やすく且つ異なるブラウザ間でも同じデザインにする「SimpleBar」ライブラリの利用方法
CSSのoverflowでスクロールバーを設置した際、ブラウザによってデザイン( ...
-
-
Dexie.jsを利用してIndexedDBを取り扱う方法
IndexedDBを用いて色々するという案件を見かけたが、そもそもIndexed ...
-
-
バニラJavaScriptでリッチなセレクトメニュー(プルダウン)を実装できる「Choices.js」の利用方法
サジェストや複数選択等、機能付きのセレクトメニュー(プルダウン)を実装する際、今 ...