Help us understand the problem. What is going on with this article?

【JavaSctipt】Chosenでselectボックスをおしゃれにする【ライブラリ】

More than 1 year has passed since last update.

selectのプルダウンを、ちょっとおしゃれで便利にしてしまうJavaScriptのライブラリ「Chosen」の紹介です。
本家:Chosen: A jQuery Plugin by Harvest to Tame Unwieldy Select Boxes :link:

1.ダウンロード

GitHubから適当なバージョンのファイルをダウンロードします。
zipファイルなので、ダウンロードしたら解凍しておきましょう。

2.インストール

上記1.で解凍したフォルダの中身はこんな感じ:arrow_down:

chosen_v1.y.z
└docsupport
 └init.js★
 └jquery-3.2.1.min.js★
 └・・・(省略)
└chosen.jquery.js★
└chosen.jquery.min.js
└chosen.css★
└chosen.min.css
└chosen-sprite.png★
└・・・(省略)

この中から、★がついた5つのファイルを、Chosenを使いたい案件フォルダにコピーします。[min]のファイルでもOKです。
注意すべきなのは、chosen.cssと同じ階層にchosen-sprite.pngを置くことです。
そして、htmlの中でパスを指定します。

<link rel="stylesheet" href="./css/chosen.css">
<script src="./js/jquery-3.2.1.min.js" type="text/javascript"></script>
<script src="./js/chosen.jquery.js" type="text/javascript"></script>
<script src="./js/init.js" type="text/javascript" charset="utf-8"></script>

補足

Chosenは「これ1つで完璧:notes:」なので、jQueryなど、別途必要なライブラリも全て同梱されてます。
なので、ディレクトリ構造を意識しないのであれば、解凍したchosen_v1.y.zを丸ごとコピペすれば完結します:smiley:

ただ、まぁ、実際の現場・案件で使うと「こんなディレクトリ構造は嫌だ」ってなったり、ドキュメント用のindex.htmlが混ざっていたりするので、まるごとコピーするのはちょっと乱暴かなーと:sweat_drops:

3.使ってみる

普通に書いたselectボックスはこうなります:arrow_down:が・・・。
chosen_01_100.png

Chosenを使うとこんな感じ:arrow_down:になります。
chosen_02_100.png

さらに、一部を入力して部分一致検索もできちゃいます:exclamation:
chosen_03_100.png

ソースコードはこちら:pencil2:

<script type="text/javascript">
$(document).ready(function() {
  $(".chosen-select").chosen(); <!--★★ここと対応する!-->
});
</script>

<select class="chosen-select"> <!--★★ここのchosen-selectが・・・-->
  <option value=""></option>
  <option value="Australia">Australia</option>
  <option value="Brazil">Brazil</option>
  <option value="China">China</option>
  <option value="Finland">Finland</option>
  <option value="France">France</option>
  <option value="Japan">Japan</option>
  <option value="Malaysia">Malaysia</option>
  <option value="Monaco">Monaco</option>
  <option value="Russian Federation">Russian Federation</option>
  <option value="United Kingdom">United Kingdom</option>
  <option value="United States">United States</option>
</select>

HTML側ではselectボックスにclassを指定し、js側でchosen()メソッドを呼び出すだけです。
プルダウンの中身が多い時に、部分一致検索ができるのは、とっても便利です:star:
ちなみに、multiple="multiple"って複数選択可能にした場合も、全く同じjsで対応可能です。

4.少しこだわってみる

4-1.プレースホルダーを変更する

さて、普通に$(".chosen-select").chosen();すると、このように「Select an Option」と表示されてしまいます。
※この画像、幅が小さいので見切れてますが・・・:scissors:
chosen_04_100.png
これをオリジナルの文言に変更するには、2つの方法があります。

A)selectタグで設定する

selectタグにdata-placeholderを設定すればOK:ok_hand:です。

<select class="chosen-select" data-placeholder="国の名前"> <!-- ★ここ★ -->
  <option value=""></option>
  <option value="Australia">Australia</option>
  <option value="Brazil">Brazil</option>
  ・・・(省略)
  <option value="United States">United States</option>
</select>

B)jsで初期値を設定する

$(".chosen-select").chosen();のオプションとして、「placeholder_text_single」を指定すればOK :ok:

<script type="text/javascript">
$(document).ready(function() {
  $(".chosen-select2").chosen({
    placeholder_text_single : "ぷれーすほるだ。"
    <!-- ★★マルチの時は「placeholder_text_multiple-->
  });
});
</script>

ちなみに、chosen.jquery.jsの中でデフォルト値が入る設定になっているので、表示させたくない場合は、chosen.jquery.jsを直接書き換えてください(・・・って公式に書いてあった :sweat_smile:)。

4-2.横幅を変更する

上記4-1.で作ったselectボックスは、横幅が狭くてプレースホルダーが見切れていました。
chosen_04_100.png
これではかっこ悪いので、widthオプションを指定します。

<script type="text/javascript">
$(document).ready(function() {
  $(".chosen-select").chosen({
    width: "300px" <!-- ダブルクォートで囲めば%表記も可 -->
  });
});
</script>

chosen_05_100.png
はい:exclamation:赤い矢印で示した部分が300pxになりました:cherries:
プレースホルダもプルダウンの値もすっきりしましたね。

まとめ

以下2つが出来れば、とりあえず使えそうです。
1. jQuery含め4つのファイルのパスを通す。
2. selectボックスにclass名を指定して$(".chosen-select").chosen();する。

他にもいろいろオプションがあるので、必要に応じてChosenの公式サイト :link:を参照すればよいと思います。

おまけ

公式サイトのsetupが面白かったので、意訳してみました:joy:
1. ダウンロードして、あなたのアプリケーションにChosenのファイルをコピーしてください。
2. Choseを効かせたいselectボックスに対して$(".chosen-select").chosen()と書いてください。
3. あとはdiscoしようぜ:sparkles: ←え?

公式サイトではdiscoのとこにリンクが張られているので、ぜひ飛んでみてください:wink:

mtanabe
画面系に抵抗感のないJavaエンジニア。最近はMySQLとも仲がいいです。 設計から実装、テスト、チームメンバーの成果物のレビューなどなど、幅広くやってます。
techfun
Tech FunはITの力で世界を豊かにする総合サービス企業です。 IT研修スクール「TechFun.jp(https://techfun.jp/)」、eラーニングプラットフォーム「StudySmile(https://studysmile.com/)」のほか、ミャンマーオフショア開発、スマートフォンアプリ開発、Webシステム開発、SIサービスを展開しています。
https://www.techfun.co.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした