セレクトボックスに検索機能を付けるjQueryプラグイン「Select2」

2019年2月14日

セレクトボックスに大量のデータがあると、目的の項目を探し出すのにとても苦労します。

内容がある程度ソートされてたりすればなんとかなるのですが、無秩序で並んでいると「ああああああ！どこにいるんだよ！」とイライラしてしまいます。

今回は、そんなイライラを解消してくれるjQueryプラグイン「Select2」を紹介します。

Select2を使えば、セレクトボックスに検索機能を付けることができるようになります！

導入方法

ダウンロード

CDNがあるので、今回はCDNを使ってデモを作っていきます。
ファイルをダウンロードしたい方は、公式サイトにアクセスからどうぞ。

コード

jQueryを読み込み、そしてSelect2の本体と日本語化ファイルとCSSを読み込みます。

<!-- jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Select2.css -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.min.css">
<!-- Select2本体 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.min.js"></script>
<!-- Select2日本語化 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/i18n/ja.js"></script>

続いて、セレクトボックスを追加します。
セレクトボックスには、Select2と結びつけられるようにclass属性：test-select2を記述します。

<select class="test-select2">
  <option>　</option>
  <option>リンゴ</option>
  <option>ゴリラ</option>
  <option>ラッパ</option>
</select>

最後にSelect2用のスクリプトを記述します。
日本語化を行うので、languageの設定も行います。

$(function() {
  $('.test-select2').select2({
    language: "ja" //日本語化
  });
})

これで完成です。
ミスなく記述できていれば、以下のように動作します。

オプションなど

複数選択できるようにする場合

複数選択する場合は、セレクトボックスにmultipleを付けるだけでOKです。

<select class="test-select2" multiple="multiple">
  <option>リンゴ</option>
  <option>ゴリラ</option>
  <option>ラッパ</option>
</select>

配列オブジェクトからoptionを動的に生成する

配列オブジェクトを使って、動的にoptionを生成することもできます。

まずは、空のセレクトボックスを用意します。

<select class="test-select2">
</select>

続いて配列オブジェクトselect_dataを作成し、Select2呼び出し時にオプションに設定します。

//optionにするデータ、idがvalue、textがoptionのテキストになります。
var select_data = [
	{id:'',text:'選択してください'},
	{id:1,text:'リンゴ'},
	{id:2,text:'ゴリラ'},
	{id:2,text:'ラッパ'},
]

$(function() {
  $('.test-select2').select2({
    language: "ja",
    //dataオプションにselect_dataを設定
    data: select_data
  });
})