フォームのselect要素をタグに変換するプラグイン「Simple Tagger」を紹介します。
jQueryプラグイン「Simple Tagger」
このプラグインを使えば、フォームのselect要素をシンプルなタグに変換することができます。ユーザーに分かりやすいので、おすすめです。
CSSには、Bootstrapを使っているので、カスタマイズも簡単に行えます。
デモで、プラグインの挙動を確認してみてください。
「Simple Tagger」のデモ
デモのソース（HTML + jQuery）
<meta name="description" content="Simple Taggerのデモでーす。"> |
<meta name="viewport" content="width=device-width, initial-scale=1"> |
<title>Simple Tagger - jQuery Plugin Demo</title> |
<link rel="stylesheet" href="css/normalize.css"> |
<link rel="stylesheet" href="css/main.css"> |
<link rel="stylesheet" href="css/bootstrap.min.css"> |
<link rel="stylesheet" href="css/jquery.simpleTagger.css"> |
<script src="js/modernizr-2.6.2.min.js"></script> |
<h1>Simple Taggerのデモでーす。</h1> |
<select id="tagger-default"> |
<option>javascript</option> |
<script src="js/jquery-1.10.2.min.js"></script> |
<script src="js/bootstrap.min.js"></script> |
<script src="js/jquery.simpleTagger.js"></script> |
$("#tagger-default").simpleTagger(); |
jsファイルのダウンロードやオプションなどの詳細はこちらからどうぞ。