使う機会は多いけど、少々物足りないHTMLのSelectタグことセレクトボックス。
項目数が多くなると、下に下にたどるめんどくささや、複数選択のUIのわかりにくさ等。
そんなSelectタグを簡単に使いやすく高機能にしてくれるjQueryのプラグインがSelect2。
ライセンスはみんな大好きMIT License。
組み込み
組み込み方は2通り。
ホスティングサービスから直接取るか、ダウンロードして自サイトへ組み込むか。
■cdnjsかjsDeliverホスティングされているのを使う方法
cdnjsからとってくる場合
|
1 2 |
<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で設定
|
1 2 3 |
<script type="text/javascript"> $('select').select2(); </script> |
もちろん、これだと全部あたるので特定のクラス名を指定してもいい。
ちなみにjQueryでSelectの値をセットしてもイベントを起こさないと変わらない。
|
1 |
$('select').val('moge').change(); |
最低限の機能だけ乗せたデモページ作ってみた。
色々な機能が見たければ本家のサンプルページをご参考に。