Writer:Asai (20.09.17)
jQueryプラグイン「Select2」を利用し、セレクトボックスの利便性を向上します。項目が多くなると選択までの労力がかかるセレクトボックスですが、Select2には検索機能も実装されているため、ユーザーの利便性が大きく向上します。
実装例
上記のように、デフォルトと比較するとSelect2との違いがはっきりすると思います。大きな違いはセレクトボックス内の検索機能です。こちらで検索をすることができるので、長いセレクトボックスから1つひとつ探す手間が省けます。
必要なファイルを準備する
Select2をダウンロード
下記のリンク先より、Select2のファイルをダウンロードします。
ダウンロードしたファイルのうち、利用するファイルは「select2.min.jsとselect2.min.css」です。これらのファイルはダウンロードしたファイル内の「dist」フォルダに入っています。
用意したファイルを読み込む
用意したfsv.jsとstyle.cssを利用したいファイルにリンクさせます。jQueryも利用するため、併せてリンクを設定します。
<link href="select2.min.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="select2.min.js"></script>Select2の設定
Select2の基本設定は下記のとおりです。
$(document).ready(function() {
$('.select').select2();
});
上記の設定を記述することで、Select2の設定は完了です。Select2には多数のオプションが用意されています。placeholderの設定や複数選択などが実装できます。詳しくは下記のサイトにて紹介されているので、参考にしてください。非常にわかりやすくまとめられているので、理解しやすいと思います。
コラム執筆中
アイビーネットでは、ホームページに関するコラムを随時執筆中です。
