selectボックスを華麗にしてくれる「Chosen」「Select2」

selectボックスに当てるjQueryプラグインを色々探してみましたがこれに決めました。シングルやマルチ、またグループにも対応しています。インスタンス検索してくれるのが決め手
Chosen CDN

ライブラリ

<link href="chosen.css" type="text/css" rel="stylesheet">
<script src="jquery.min.js" type="text/javascript"></script>
<script src="chosen.jquery.min.js" type="text/javascript"></script>

実装

既存のselect(combo)ボックスにidもしくはclassを付与して、以下を追加するだけです。

$("#sel1049").chosen();

jQuery以外のJavascriptフレームワーク用のものもあるようです。

Select2

「Chosen」の場合、ある一定の条件下でドロップダウンが隠れてしまう場合があります。色々議論されているようですが結論がよく分かりません。そこで「Select2」を。
どちらが先かは分かりませんが、そっくりです。こちらは隠れません。実装方法も同じです。
ダウンロード CDN

<script src="jquery.min.js" type="text/javascript"></script>
<link href="select2.css" type="text/css" rel="stylesheet">
<script src="select2.min.js" type="text/javascript"></script>

$("#sel1049").select2();

multipleでデモつくってみました。こちら

Select2 オプション

検索ボックスを無効にする

デフォルトで実装した場合、検索ボックスがドロップダウン内に表示されます。それを無効にする方法。
セレクトボックスのオプション数がminimumResultsForSearch以下の場合、検索ボックスは表示されません。

// オプション数が5つ以下の場合検索ボックスを表示させない。
    $("#sel1049").select2({
        minimumResultsForSearch: 5
    });

Related

表示パターン豊富なスライダー「flexslider 2」 ローソク足チャート「jqPlot」 テキストに動きをつけるプラグイン 時刻入力に便利な「Timepicker for Bootstrap」(Bootstrap 2) 実装方法が選べるツールチップ用プラグイン「Smallipop」 タブを画面サイズによってアコーディオンにしてくれる「Easy Responsive Tabs to Accordion」 ECサイトの商品表示に使えそうなスライダー「Simple Multi-Item Slider」 select(list)ボックスを左右に並べて視覚的に使いやすくしてくれる「Multiselect」