勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

バニラJavaScriptでリッチなセレクトメニュー(プルダウン)を実装できる「Tom Select」の利用方法

  JavaScript

先日バニラJavaScriptでリッチなセレクトメニュー(プルダウン)を実装できる「Choices.js」の利用方法をメモしたがCSSに若干癖があった。他に似たようなライブラリが無いか探したところ「Tom Select」がCSSに癖も無く使いやすそう。以下にサンプルと利用方法をメモ。

 

Choices.js

公式サイト

https://tom-select.js.org/

GitHub

https://github.com/orchidjs/tom-select

CDN

CDNで使う場合は以下を記述する。

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<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 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 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/

 

実装方法

ソースコード

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<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>
<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>
<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を指定しなくてもそのまま使っていけそう。またデザイン的にもこっちの方が個人的には好きかも。

 - JavaScript

  関連記事

ブラウザ開発者ツールの起動を検出しソースコード変更やリダイレクト設定できる「console-ban」ライブラリの利用方法

他サイトのソースコードを拝見するため開発者ツールを開こうとすると、偶に「デバッガ ...

バニラJS対応(jQuery非依存)の画像遅延読み込みライブラリ「lazysizes」の利用方法

あるサイトのコーディングデータを貰った際に「lazysizes」というJavaS ...

JavaScript / PHPにて「lz-string」を用いてデータの圧縮・展開する方法

文字数が多いGETパラメータを送信したいというケースがあった。また、送信側はJa ...

JavaScriptでCookieを取り扱う「js-cookie」ライブラリの利用方法

「jquery-cookie」プラグイン開発終了に伴い「js-cookie」ライ ...

JavaScriptでlocalStorageを簡単に操作できる「store.js」ライブラリの利用方法

以前Dexie.jsを利用してIndexedDBを取り扱う方法をメモしたが、今回 ...

S