Select2の使い方をサンプルコード付き解説！
Select2の使い方をサンプルコード付き解説します。Select2を用いると検索機能付きのセレクトボックスを簡単に作成することができます。ではSelect2の使い方を見ていきましょう。
jQueryプラグイン「Select2」とは？
jQueryプラグイン「Select2」を用いると簡単に検索機能付きのセレクトボックスを作成することができます。
では以下の項目でSelect2の使い方を見ていきましょう。
Select2の導入方法
Select2の導入方法としてダウウンロードする方法とCDNを用いる方法の2パターンがあります。
それぞれの方法を紹介します。
ダウンロードして用いる場合
まず以下のサイトでコードをダウンロードしてください。
ダウンロードしたファイルの以下の場所にselect2.min.cssとselect2.min.jsがあります。
dist └css └select2.min.css └js └select2.min.jsHTMLで
select2.min.cssとselect2.min.jsとjQueryを読み込むとselect2を使えるようになります。CDNを用いる場合
Select2のCDNは以下のようになります。
Select2のCDN
<!-- Select2.css -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/css/select2.min.css">
<!-- jquery & iScroll -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Select2本体 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/js/select2.min.js"></script>これらをHTMLに読み込むとSelect2を使えるようになります。
Select2の使い方の基本
ではSelect2の基本的な使い方について解説します。
まずサンプルコードを用意したので、実際に挙動を確認してみましょう。
このように検索機能が付いたセレクトボックスが作成できていることが分かります。
Select2を用いるために、jQueryにてselect要素のclass名にselect2()メソッドを記述することでSelect2を使えます。
オプションを使用するには
ではオプションを使用する方法について解説します。
オプションはselect2メソッドの中に記述します。
ではサンプルコードで実際に挙動を確認してみましょう。
このようにオプションが機能し、サンプルコード1つ目と少し見た目が変わっていることが分かります。
オプションの解説
ではオプションを1つ1つ解説します。
widthとplaceholderとlanguage: 'ja'についてはそのままの意味なので割愛します。
allowClear: trueとすることで、矢印の横に×ボタンが付き、初期値を削除することができます。
tags: trueとすることで検索ボックスに入力した値がoption要素になくても反映されるようになります。
ここで紹介したものいがいにも多くのオプションが存在します。
詳しくは以下のサイトを参照してください。
まとめ
いかがでしたでしょうか？
select2には多くのオプションが存在し、色々工夫して実装することができます。
ぜひここで紹介した方法を用いて、実装してみてください。
また以下の項目で、さらに便利にSelect2を使う方法を紹介します。
Select2に初期値を設定する
Select2のデフォルトだとoption要素の1つ目が初期値に設定されます。
この初期値は自由に変えることができます。
Select2の初期値を自由に変える方法については以下の記事で解説しているので、参照してください。
Select2の日本語化について
Select2はデフォルトだと英語表記になっています。
日本語表記に変えるためにはCDNを読み込ませる必要があります。
Select2を日本語表記に変える方法については以下の記事で詳しく解説しているので参照してください。
