Chosen

フォームなどでよく使われるセレクトボックスですが、デフォルトのままで使うことが多いと思います。

そのセレクトボックスをもっと使いやすくカスタマイズしてくれるjQueryプラグインがこの「Chosen」です。

セレクトボックスをプルダウンすると検索窓が表示され、そこからインスタンス検索が可能になります。選択する項目が増えるほど効力を発揮できそうですね。

動作は次のサンプルを見ていただいた方がわかりやすいと思います。

セレクトボックスを使いやすくカスタマイズするjQueryプラグイン「Chosen」のサンプル

見た目もスタイリッシュになり、検索窓からリアルタイムに絞り込みできるのが嬉しいですね。

使用方法

まずはChosenから一式ダウンロードしてきます。

<head>部分にcssとJavaScriptを指定します。利用するファイルとパスに注意してください。

<body>部分にセレクト要素を記述します。

これだけで、セレクトボックスの機能がぐっとアップします。これだけでも結構使えるのではないでしょうか?

最後にサンプルのソースを書いておきます。どうぞご参考まで。

この記事と関連してると思われる記事:

    None Found