セレクトボックスを100倍使い易くする！！

投稿日:

社内のツールを空き時間で作成しているのですが、セレクトボックスで選択する項目の中身（option）が、ものすごい数になっており絞り込むにも絞り込めない状態でした。
少し調べて見たところ、とても素晴らしい物がありましのたで早速使って見ました。

 

[browser-shot width=”400″ url=”http://ivaynberg.github.io/select2/”]
Select2 – Select2 is a jQuery based replacement for select boxes.

 

使い方はとても簡単で、ファイルをダウンロードして解凍し設置、設定を行うだけです。
※どのライブラリでも同じですね・・・。

 

では、早速ダウンロードしたファイルを配置して行きます。

今回は、ドキュメントルートの直下のディレクトリに設置する仮定で話を進めますが、利用する場合には各々の環境（場所）に応じてパスは書き換えてください。
構成図
　(ドキュメントルート)
　　　├ ./js
　　　│　└ select2.min.js
　　　├ ./css
　　　│　└ select2.css
　　　├ ./img
　　　│　├ select2.png
　　　│　├ select2-spinner.gif
　　　│　└ select2x2.png
　　　└ index.html

 

index.htmlには下記の様になっています。
※この設定内容で動作させる場合には、select2.cssの画像の読み込み場所を変更する必要があります。
[html]









[/html]

 

設置後、select2.min.jsとselect2.css、その他イメージファイルがちゃんと読み込めていれば、機能が有効になっているはずです。

 

複数の選択を利用したい場合には、selectタグを下記の様に書き換えて下さい。
[html]