ざっくりとSelect2

使う機会は多いけど、少々物足りないHTMLのSelectタグことセレクトボックス。
項目数が多くなると、下に下にたどるめんどくささや、複数選択のUIのわかりにくさ等。

そんなSelectタグを簡単に使いやすく高機能にしてくれるjQueryのプラグインがSelect2。
ライセンスはみんな大好きMIT License。

組み込み

組み込み方は2通り。
ホスティングサービスから直接取るか、ダウンロードして自サイトへ組み込むか。

■cdnjsかjsDeliverホスティングされているのを使う方法

cdnjsからとってくる場合

<link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.min.css" rel="stylesheet" />
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.min.js"></script>

 ■ダウンロードして次サイトに組み込む方法

ダウンロードサイトからダウンロードしてきます。

解凍したファイルのdistディレクトリに入っているcssとjsのセットをサイトに組み込んで使います。

使い方

JavaScriptで設定

<script type="text/javascript">
  $('select').select2();
</script>

もちろん、これだと全部あたるので特定のクラス名を指定してもいい。

ちなみにjQueryでSelectの値をセットしてもイベントを起こさないと変わらない。

$('select').val('moge').change();

最低限の機能だけ乗せたデモページ作ってみた。

色々な機能が見たければ本家のサンプルページをご参考に。