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

【JavaScript】Select2でプルダウンをおしゃれにする【ライブラリ】

More than 1 year has passed since last update.

selectのプルダウンを、ちょっとおしゃれで便利にしてしまうJavaScriptのライブラリ「Select2」の紹介です。
本家:Select2 - The jQuery replacement for select boxes :link:

1.ダウンロード

SDN、Bower、GitHubからのダウンロードと3パターンの方法がありますが、今回はGitHubから適当なバージョンを選択して、zip圧縮されたソースコードをダウンロードしました。
zipファイルなので、ダウンロードしたら解凍しておきましょう。

2.インストール

上記1.で解凍したフォルダの中にdistというフォルダがあるはずです。
中身はこんな感じ :arrow_down:

dist
└css
 └select2.min.css
 └・・・(省略)
└js
 └select2.min.js
 └・・・(省略)

cssフォルダとjsフォルダの中身を、Select2を使いたい案件フォルダにコピーします。
そして、htmlの中でパスを指定します。

<link href="./css/select2.min.css" rel="stylesheet" />★★ここ
<script src="./js/userJs/jquery-3.3.1.min.js"></script>
<script src="./js/select2.min.js"></script>★★ここ

しれっとjquery-3.3.1.min.jsが混ざってますが、Select2はjQueryが前提条件になっています:pig2:

3.とりあえず使ってみる

3-1.シンプルな単一のselectボックス

普通に書いた、このselectボックスにSelect2を適用すると・・・。
simple_01_100.png

こうなります :arrow_down:
simple_02_075.png

しかも、これ、部分一致検索ができてしまうんです:open_mouth:
simple_03_085_ar.png

ソースコードはこちら:pencil2:
HTML側ではselectボックスにclassを指定し、js側でselect2()メソッドを呼び出すだけ:exclamation:
たったこれだけで、部分一致まで出来てしまうなんて、すごくないですか???

<script>
$(document).ready(function() {
    $('.select2_01').select2();<!--★★ここと対応する!-->
});
</script>

<select class="select2_01"><!--★★ここのclass名が・・・-->
  <option value="tote">トートバッグ</option>
  <option value="shoulder">ショルダーバック</option>
  <option value="ruck">リュックサック</option>
  <option value="waist">ウエストポーチ</option>
  <option value="clutch">クラッチバッグ</option>
</select>

ちなみに、multiple="multiple"って複数選択可能にした場合も、全く同じjsで対応できちゃいます:sparkling_heart:

3-2.幅を調整する。

JavaScript1行でおしゃれになったのですが、実はデフォルトのままだと横幅が足りなくなることがあります。
simple_04_100.png
表示されるんですけど、なんかかっこ悪い・・・:expressionless:
そこで、さっきのJSにwidthの設定を追加してみます。

<script>
$(document).ready(function() {
  $('.select2_01').select2({width: 'resolve'});
  <!-- [resovle]CSSの値を読み取ってくれる。必要であれば適当に横幅を計算してくれる。 -->
});
</script>

<select class="select2_01" style="width:200px;"> <!-- CSSで幅を指定 -->
  <option value="tote">トートバッグ</option>
・・・(略)
</select>

widthの設定を追加すると・・・ :arrow_down:
simple_05_100.png
横幅が200pxになりました!
これで、幅が足りずに折り返してしまう・・・という不細工な状態からおさらばです:leaves:

4.少しこだわってみる

4-1.動的にoptionタグを生成する

PHPやRuby、Javaなんかでサーバー側のプログラムを作っていると、SQLで取ってきた値をselectボックスに使いたくなります。
Select2には、selectのoptionタグを動的に生成する機能も備わってます:hatched_chick:
まず、公式サイトのArraysの項目を参考に、適当な名前で配列を定義します.

<script>
var data = [
  {
    id: 0,
    text: 'America'
  },
  {
    id: 1,
    text: 'Canada'
  },
  {
    id: 2,
    text: 'Mexico'
  },
  {
    id: 3,
    text: 'Panama'
  },
  {
    id: 4,
    text: 'Cuba'
  },
];

$(document).ready(function() {
    $('.select2_04').select2({
      data: data <!-- ★★ここでvar dataを読み込む!-->
    });
});
</script>

<select class="select2_04">
</select>

そして、3-2.でwidthの指定をしていた箇所で、今度はdataの指定をします。
widthも一緒に設定したければ、dataの前後にカンマ区切りで書けばOK:ok:です。

そうすると・・・:arrow_down:
simple_06_100.png
HTML側でoptionタグを生成しなくても、js側で・select2のメソッドで自動生成してくれます!

5.まとめ

とりあえず使ってみるだけなら、以下の2つが出来ればOK:ok_hand:です。
1. インストールしてcssとjsのパスを通す。
2. $(document).ready(function(){});でselect2()を呼び出す。

上記2点に加えて、widthとdataをうまく設定してあげれば見た目もoptionタグもそれなりにきちんとしたものになるんじゃないかと思います。。

他にもいろんな機能があるので、あとは必要に応じてSelect2の公式サイト :link:を見ていけばよいかと。
では、おしゃれなselectボックスライフを:bouquet:

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
ユーザーは見つかりませんでした