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

サイト

https://select2.github.io/

 

DL

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

 

 

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

 

 

 

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

 

 

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

 

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

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

 

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

 

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

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

 

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

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

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

 

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

 

 

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

 

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

 

 

詳しいやり方

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

 

 

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

IE 8+

Chrome 8+

Firefox 10+

Safari 3+

Opera 10.6+

 

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

  • このページを共有する

関連記事こちらの記事も合わせてどうぞ。