[JS]セレクトボックスの使い勝手をパワーアップするスクリプト -Select2
Post on:2012年6月11日
sponsors
セレクトボックスを美しいデザインにするだけでなく、各アイテムに画像を配置したり、タグやプレースホルダテキストや検索の対応、セレクトボックスのコントロールなど、さまざまなことができるjQueryのプラグインを紹介します。
[ad#ad-2]
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();
});
[ad#ad-2]
セレクトボックスにプレースホルダテキストを配置します。
$(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"); });
sponsors
