勉強したことのメモ

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

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

  JavaScript

サジェストや複数選択等、機能付きのセレクトメニュー(プルダウン)を実装する際、今までは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

  関連記事

JavaScriptで小数の計算をする際にずれ(誤差)を無くす方法(decimal.js)

JavaScriptで小数の計算をすると値がずれる(誤差が発生する)ことがあった ...

jQueryのトースト(通知)用ライブラリ「iziToast.js」の利用方法

システム構築の際、エラー表示をJavaScriptのアラートではなくトースト(通 ...

jQueryプラグインでクリップボードにコピーする方法(clipboard.js)

ページ上のボタンをクリックすることで特定の文章をクリップボードにコピーしたかった ...

JavaScriptで配列やオブジェクトの中身をブラウザに表示する方法

JavaScriptで配列やオブジェクトの中身を確認したい場合、console. ...

JavaScriptでオブジェクトをzlib圧縮してCookieに保存できる「zcookies」ライブラリの利用方法

あるシステムでCookieを保存している部分があった。ただ、日本語を保存している ...