【jQuery】select2プラグイン

セレクトボックスに装飾を加えるプラグイン。フィルタ付きセレクトボックスや、タグ付きセレクトボックスや、画像付きセレクトボックスなどが作れる。

サイト
https://select2.github.io/

CDN

<link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0-rc.2/css/select2.min.css" rel="stylesheet" />

<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0-rc.2/js/select2.min.js"></script>

フィルタ付きセレクトボックス

html

<select>
  <option>サッカー</option>
  <option>野球</option>
  <option>バスケ</option>
</select>

jQuery

$('select').select2({
  width:"300px",  //サイズ
  placeholder: "スポーツを選択してください", //プレースフォルダ
  allowClear: true //
})
//セレクトボックス変更時
.on('change',function(){

})

参考
Events in select2 [jQuery]
select2.jsを使用してみる
[JS]セレクトボックスの使い勝手をパワーアップするスクリプト -Select2

bootstrap2のモーダルと併用して動かなかった件

モーダルにtabindex="-1"を書くと動かないので注意。

参考：Select2 doesn't work when embedded in a bootstrap modal