セレクトボックスのタグ拡張

サイト

https://select2.github.io/

DL

https://github.com/select2/select2/tags

まずはこちらのサイトから今回使用するcssやjavascriptなどのファイルをダウンロードし、htmlのhead内にcssとjavascriptを読み込ませます。

<link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0-beta.3/css/select2.min.css" rel="stylesheet" />
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0-beta.3/js/select2.min.js"></script>
<script>
	$(document).ready(function() {
		$('.tag_option').select2();
	});
</script>

複数入力したい場合は、multiple=”multiple”を付けて下さい。

<select class="tag_option">
	<option value="みかん">みかん</option>
	<option value="ばなな">ばなな</option>
	<option value="りんご">りんご</option>
	<option value="すいか">すいか</option>
	<option value="なし">なし</option>
	<option value="めろん">めろん</option>
	<option value="ぱいなっぷる">ぱいなっぷる</option>
	<option value="いちご">いちご</option>
	<option value="ぶどう">ぶどう</option>
</select>

作成したデモページはこちら。

select要素を拡張し、かつデザインもおしゃれな感じになりましたね。

今回はmultipleタイプしか紹介してませんが、multipleタイプだけでも色々とあります。

1つ目のdemoはデフォルト設定のdemoで、選択した時に候補が表示されます。

2つ目のdemoでは、2文字以上を入力、かつヒットしなければ表示されない仕組みになってます。

たくさん候補があった場合など、絞りこみ検索のような感じで使用でき、便利かもしれませんね。

3つ目はselect要素を使ってません。

オプションでタグの中身を決めたり、ユーザーが任意にタグを作ることも可能になってます。

適当な文字を入力するとそれがタグになります。

HTMLの記述は下記になります。

<script>
$(document).ready(function() {
	$('.tag_option_j').select2({
		placeholder: "選択して下さい",
		tags: ["みかん", "ばなな", "りんご", "すいか", "なし", "めろん", "ぱいなっぷる", "いちご", "ぶどう"],
		tokenSeparators: [",", " "]
	});
});
</script>
<div class="tag_option_j"></div>

色々なことが出来ますので、試ししてみてはいかがでしょうか。

他にも6回目で書いた
jQueryプラグイン『iCheck』を使ってカッコいいチェックボックス、ラジオボタンを作ると組み合わせるといいかもしれませんね。

詳しいやり方

http://select2.github.io/select2/

対応ブラウザは下記になります。

IE 8+

Chrome 8+

Firefox 10+

Safari 3+

Opera 10.6+

以上、ウェブラボ技術メモでした。