[JS]セレクトボックスの使い勝手をパワーアップするスクリプト -Select2

セレクトボックスを美しいデザインにするだけでなく、各アイテムに画像を配置したり、タグやプレースホルダテキストや検索の対応、セレクトボックスのコントロールなど、さまざまなことができるjQueryのプラグインを紹介します。

サイトのキャプチャ

Select2 GitHub

Select2の対応ブラウザ

Select2の対応ブラウザは下記の通りです。

  • IE8+
    ※IE7はz-indexを使った一部のものにバグあり。
  • Chrome8+
  • Firefox3.5+
  • Safari3+
  • Opera10.6+

Select2のデモと実装

各デモとともに実装方法を紹介します。
jQueryは1.7+推奨で、1.4.2から対応しています。

デモのキャプチャ

デモ:ベーシック(上:既存、下:Select2適用)

まずは、ベーシックなデモから。
下記のシンプルな記述で、既存のセレクトボックスのデザインが美しくなります。

<head>
	<link href="select2.css" rel="stylesheet"/>
	<script src="select2.js"></script>
	<script>
		$(document).ready(function() { $("#e1").select2(); });
	</script>
</head>
<body>
	<select id="e1">
		<option value="AL">Alabama</option>
		...
		<option value="WY">Wyoming</option>
	</select>
</body>
デモのキャプチャ

デモ:マルチバリュー

Select2はマルチバリューのセレクトボックスもサポートします。

$(document).ready(function() {
	$("#e9").select2();
});

デモのキャプチャ

デモ:プレースホルダ

セレクトボックスにプレースホルダテキストを配置します。

$(document).ready(function() {
$("#e2").select2({
		placeholder: "Select a State",
		allowClear: true
	});
	$("#e2_2").select2({
		placeholder: "Select a State"
});
});
デモのキャプチャ

デモ:タグ

タグを使用することもできます。新規のタグの作成も可。

$(document).ready(function() {
$("#e12").select2({tags:["red", "green", "blue"]});
});
デモのキャプチャ

デモ:画像の使用

各アイテムに画像を配置します。

$(document).ready(function() {
function format(state) {
	return "<img class='flag' src='images/flags/" + state.id.toLowerCase() + ".png'/>" + state.text;
}
	$("#e4").select2({
		formatResult: format,
		formatSelection: format
});
});
デモのキャプチャ

デモ:ミニマムインプット

指定した文字数での検索をサポートし、ミニマムにします。

$(document).ready(function() {
$("#e3").select2({
	minimumInputLength: 2
});
});
デモのキャプチャ

デモ:セレクトボックスの制御

選択したアイテムの抽出、アイテムのセット、セレクトボックスの開閉などもできます。

$(document).ready(function() {
$("#e8").select2();
$("#e8_get").click(function () { alert("Selected value is: "+$("#e8").select2("val"));});
$("#e8_set").click(function () { $("#e8").select2("val", "CA"); });
$("#e8_open").click(function () { $("#e8").select2("open"); });
$("#e8_close").click(function () { $("#e8").select2("close"); });

top of page

©2017 coliss