フォームの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ファイルのダウンロードやオプションなどの詳細はこちらからどうぞ。