Chosenプラグインの基本的な使い方

セレクトボックスの選択肢が多い場合、ユーザーにとって使いづらいものになってしまいます。何か良い方法はないかと探していたのですが、ChosenというjQueryプラグインを見つけました。この記事ではChosenの使い方を簡単に紹介します！

Chosenプラグインとは

Chosenプラグインとは、セレクトボックスをユーザーにとって使いやすくするためのjQueryプラグインです。下記のリンク先にサンプルと使い方の説明があります。FAQsにオプションの一覧ページへのリンクがありますので、使用できるオプションが知りたければ、オプション一覧のページを見てください。

Chonseプラグイン
https://harvesthq.github.io/chosen/

オプション一覧
https://harvesthq.github.io/chosen/options.html

Chosenの基本的な使い方

セレクトボックスを用意する

まずは通常のセレクトボックスを用意します。今回は選択肢が多い例として、都道府県を選択するセレクトボックスを作成しました。次にhtmlのコードと実行結果を示します。これで単純なセレクトボックスができました。

コード

<!DOCTYPE html>
<html lang="ja">
<body>

  <select>
    <option value="">選択してください</option>
    <option value="北海道">北海道</option>
    <option value="青森県">青森県</option>
    <option value="岩手県">岩手県</option>
    <option value="宮城県">宮城県</option>
    <option value="秋田県">秋田県</option>
    <option value="山形県">山形県</option>
    <option value="福島県">福島県</option>
    <option value="茨城県">茨城県</option>
    <option value="栃木県">栃木県</option>
    <option value="群馬県">群馬県</option>
    <option value="埼玉県">埼玉県</option>
    <option value="千葉県">千葉県</option>
    <option value="東京都">東京都</option>
    <option value="神奈川県">神奈川県</option>
    <option value="新潟県">新潟県</option>
    <option value="富山県">富山県</option>
    <option value="石川県">石川県</option>
    <option value="福井県">福井県</option>
    <option value="山梨県">山梨県</option>
    <option value="長野県">長野県</option>
    <option value="岐阜県">岐阜県</option>
    <option value="静岡県">静岡県</option>
    <option value="愛知県">愛知県</option>
    <option value="三重県">三重県</option>
    <option value="滋賀県">滋賀県</option>
    <option value="京都府">京都府</option>
    <option value="大阪府">大阪府</option>
    <option value="兵庫県">兵庫県</option>
    <option value="奈良県">奈良県</option>
    <option value="和歌山県">和歌山県</option>
    <option value="鳥取県">鳥取県</option>
    <option value="島根県">島根県</option>
    <option value="岡山県">岡山県</option>
    <option value="広島県">広島県</option>
    <option value="山口県">山口県</option>
    <option value="徳島県">徳島県</option>
    <option value="香川県">香川県</option>
    <option value="愛媛県">愛媛県</option>
    <option value="高知県">高知県</option>
    <option value="福岡県">福岡県</option>
    <option value="佐賀県">佐賀県</option>
    <option value="長崎県">長崎県</option>
    <option value="熊本県">熊本県</option>
    <option value="大分県">大分県</option>
    <option value="宮崎県">宮崎県</option>
    <option value="鹿児島県">鹿児島県</option>
    <option value="沖縄県">沖縄県</option>
  </select>

</body>
</html>

<!DOCTYPE html>

<body>

<option value="">選択してください</option>

</select>

</body>

</html>

実行結果

必要なファイルの読み込み

Chosenプラグインを使うためには、下記のjsファイルとcssファイルを読み込む必要があります。

jquery.min.js
chosen.jquery.min.js
chosen.min.css

ソースファイルをダウンロードしても良いのですが、今回は手軽に試すことができるCDNサービスを利用することにします。次のリンク先のcdnjsでは、3000以上のライブラリが配信されているようですので、色々試してみたい場合には便利だと思います。

cdnjs
https://cdnjs.com/

サイトにアクセスすると、このような検索ボックスが表示されます。検索ボックスに「jquery」と入力すると、次のような検索結果一覧が表示されます。

これで「jquery.min.js」のリンクがわかりました。次に「chosen」を検索してみてください。

一覧の中のライブラリ名「chosen」をクリックすると次のページに移動して、関連するファイルの情報も取得できます。

これで「chosen.jquery.min.js」と「chosen.min.css」のリンクがわかりました。これらの情報をHTMLのheadタグに記述します。次の内容を先ほど作成した「index.html」に追記しましょう。

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.min.js"></script>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.min.css" rel="stylesheet">
</head>

<head>

</head>

chosenプラグインを有効化する

https://harvesthq.github.io/chosen/の「Setup」に書かれている通り、プラグインを有効にするには、次のようにJavaScriptを実行します。この例では、”chosen-select”というクラスがついたselect要素に対して、プラグインを有効にします。id属性やHTMLタグを直接指定することもできます。

$(".chosen-select").chosen()

先ほど作成したselect要素にクラス属性を追加して、このコードをscriptタグに記述すれば、セレクトボックスが変化します。結果として、htmlコードは次のようになります。4〜6行目で必要なファイルの読み込み、63行目でプラグインを有効化しています。select要素をクラス名で指定するために、11行目にクラス属性の指定を追記しました。

これで実行結果に示すようなセレクトボックスを作成することができます。セレクトボックスに検索機能がついたことで、かなり使いやすくなったと思います。実行結果の図では、検索ボックスに「東」と入力して、選択肢を絞り込んでいます。

コード

<!DOCTYPE html>
<html lang="ja">
<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.min.js"></script>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.min.css" rel="stylesheet">
</head>

<body>

  <select class="chosen-select">
    <option value="">選択してください</option>
    <option value="北海道">北海道</option>
    <option value="青森県">青森県</option>
    <option value="岩手県">岩手県</option>
    <option value="宮城県">宮城県</option>
    <option value="秋田県">秋田県</option>
    <option value="山形県">山形県</option>
    <option value="福島県">福島県</option>
    <option value="茨城県">茨城県</option>
    <option value="栃木県">栃木県</option>
    <option value="群馬県">群馬県</option>
    <option value="埼玉県">埼玉県</option>
    <option value="千葉県">千葉県</option>
    <option value="東京都">東京都</option>
    <option value="神奈川県">神奈川県</option>
    <option value="新潟県">新潟県</option>
    <option value="富山県">富山県</option>
    <option value="石川県">石川県</option>
    <option value="福井県">福井県</option>
    <option value="山梨県">山梨県</option>
    <option value="長野県">長野県</option>
    <option value="岐阜県">岐阜県</option>
    <option value="静岡県">静岡県</option>
    <option value="愛知県">愛知県</option>
    <option value="三重県">三重県</option>
    <option value="滋賀県">滋賀県</option>
    <option value="京都府">京都府</option>
    <option value="大阪府">大阪府</option>
    <option value="兵庫県">兵庫県</option>
    <option value="奈良県">奈良県</option>
    <option value="和歌山県">和歌山県</option>
    <option value="鳥取県">鳥取県</option>
    <option value="島根県">島根県</option>
    <option value="岡山県">岡山県</option>
    <option value="広島県">広島県</option>
    <option value="山口県">山口県</option>
    <option value="徳島県">徳島県</option>
    <option value="香川県">香川県</option>
    <option value="愛媛県">愛媛県</option>
    <option value="高知県">高知県</option>
    <option value="福岡県">福岡県</option>
    <option value="佐賀県">佐賀県</option>
    <option value="長崎県">長崎県</option>
    <option value="熊本県">熊本県</option>
    <option value="大分県">大分県</option>
    <option value="宮崎県">宮崎県</option>
    <option value="鹿児島県">鹿児島県</option>
    <option value="沖縄県">沖縄県</option>
  </select>

  <script>
    $('.chosen-select').chosen();
  </script>

</body>
</html>

<!DOCTYPE html>

<head>

</head>

<body>

<option value="">選択してください</option>

</select>

$('.chosen-select').chosen();

</script>

</body>

</html>

実行結果

複数選択の場合

select要素の「multiple属性」を指定すると、選択肢を複数選択できるようになります。Chosenプラグインは複数選択にも対応しています。基本的な使い方は、単一選択と同じで、次のようにmultiple属性を追加するだけです。

<select class="chosen-select" multiple>

実行すると次のようなセレクトボックスになります。この例では、まず岩手県と青森県を選択しています。選択した項目は検索ボックスに追加され、セレクトボックスでは選択できない状態になります。項目名の右にある✖️をクリックすると、選択を解除できます。一番右の図は、「青森県」の選択を解除した状態になります。とても使いやすいですね！

実行結果