2016/12に公開
PCの場合、セレクトボックス（プルダウンメニュー）は選択項目が短い単語であれば問題ないのですが、長い文章になると場合によっては全文が表示されないという問題があります（selectタグに幅を指定していたり、幅を指定していなくても画面幅を超えるような長文だったり）。
そういった問題を解決してくれるのがChosenというプラグインです。
Chosenは他にも検索機能をつけたり、複数選択の時に選択中のものを表示してくれたり、いろいろ便利です。
そもそもセレクトボックスの選択肢が長文というのが問題かもしれません（特にスマートフォンでは見にくいかと・・・）。こういうプラグインを導入する前に、本当にセレクトボックスがベストなのか検討し直す必要もあるでしょう。
選択肢の文字数を少なくする工夫をするか、セレクトボックス以外の入力フォームを検討するか、ユーザーが使い易い入力フォームを設計してください（サイト内リンク）。
スマートフォンの場合は、なにもしなくても選択肢のテキストが長くても折り返してくれます（iOSの場合は工夫が必要のようです）。なので、スマートフォンの場合はこのプラグインを使わないほうがよいと思います（しかも若干表示がおかしくなるようです）。同一のhtmlファイルを使用している際はjsなどで切り分けるとよいでしょう（このサンプルページではスマートフォンでどう見えるか実験するために、あえて切り分けていません）。
このプラグインの導入の前に、入力フォームのデータをやり取りするCGIなどの担当者に使用しても問題ないか確認しましょう。
Chosenを適用しない場合・・・
セレクトボックスはoptionタグ内のテキストにあわせて際限なく幅が広がるので、上の例ではselectタグに幅を指定しています。optionタグには幅を指定していないので、セレクトボックスをクリックするとテキスト量によっては、選択肢がウィンドウ幅を超えてしまいます。
Chosenを適用した場合・・・
<select data-placeholder="選択してください" class="chosen-select"> <option value=""></option> <option>1.テキスト□テキスト▲</option> <option>2.テキスト□テキスト■テキスト□テキスト■テキスト□テキスト■テキスト□テキスト▲</option> </select>
※黒い部分をダブルクリックするとソースを選択できるので、コピーして使ってください。
Chosenに付属しているchosen.css（またはchosen.min.css）および画像ファイルを読み込んでいれば、これといったstyleを適用させる必要はありません。
必要に応じてselectタグに幅などを設定してください。
$(function() {
$('.chosen-select').chosen();
});
※黒い部分をダブルクリックするとソースを選択できるので、コピーして使ってください。
Chosenを適用させたいselectタグ（のclass名やid名）をセレクターとして指定して、適用させます。
これだけでChosenの基本的な機能を実行できます。
Chosen適用後のセレクトボックスをfirebugや開発モードなどでhtmlソースを見てみるとわかるのですが、optionタグの内容をリストに変換して表示しなおしています（セレクトボックスそのものは非表示になります）。
ページの下の方で紹介している類似のプラグインも変換するタグが違ったりしますが、大体同じ仕組みです。
なので、見た目のデザイン変更も容易になっています。必要に応じて適宜cssをカスタマイズしてください（ユーザーに気づいてもらえない可能性があるので、セレクトボックスであることが伝わるデザインにしましょう）。
そういうわけで通常の入力フォームの形式ではなくなってしまっているので、プラグイン導入前に、実際サーバと入力データをやり取りする際、正しく動作するかどうか担当者に検証してもらった方が無難です。
たとえば、Chosenではないですが、ページ下の方の参考URLでご紹介しているeasyselectbox（IE6/7でもセレクトボックスのデザインを変更できるプラグイン）では以下のような問題が発生しました。
スマートフォン（SP）のセレクトボックスはPCと見え方が違います。
PCでは（通常）プルダウンでoptionの中身が表示されますが、SPではオーバーフローで表示されます。
また、OS（およびそのバージョン）によっても見え方が結構変わります。
andoroidであれば、optionの中身はテキストが長くても折り返しで表示され、画面内に収まりきれない選択肢はスクロール（スワイプ）することで見ることができます。
iOSもだいたいandroidと同じですが、optionの中身はテキストが長いと省略されてしまいます。これを回避するために、optgroupタグを使います。
本来optgroupタグはoptionタグをグループ化するためのタグです。なので、iOS対策としてoptgroupタグ使用する際も、optionタグをoptgroupタグで囲みたくなると思いますが、どうやら不具合というか、微妙なことになるようです。
iOS対策として使用する際は、optionタグを囲まず、中身がない状態で使うのがベストのようです。
selectタグにmultiple属性を設定することで実装できるセレクトボックスの複数選択ですが、ユーザーの立場からするとわかりにくいし使いづらいです。気のせいか、アンケートフォームや会員登録などの入力フォームでも久しくお目にかかっていないような・・・。
世のweb制作関係の皆様も敬遠していらっしゃるんですかね。私の個人的な感覚だけではなく、本当にユーザー受けが悪いのかも知れません（裏付けるような資料は見つかりませんが）。
複数選択セレクトボックスはPCではshiftキーまたはctrlキー（コマンドキー）を押しながら選択しなければいけなかったり、iOSでは不具合があったりと、いろいろと鬼門なところがあります。
そういうわけで、本当に複数選択セレクトボックスを使用しなければならないのか、もっとユーザーにとって使いやすい入力方法はないか、よくよく考えてから導入しましょう。
私としてはどうしても使用しなければならない場面が思いつかないのですが、どんな入力方法よりも複数選択セレクトボックスが最適なのであれば、デザインなどでユーザーが使いやすく、迷わないように工夫してください。
たとえば、通常複数選択セレクトボックスでは、ボックスの大きさによっては選択中のものが見えなくなってしまいますが、これもユーザーに不便さを感じさせる一因です。
ここでご紹介したChosenは複数選択したときに選択中のものを表示するようにしたりすることができます。自分で何かしらのjsを組んでも良いですが、ほかにも複数選択セレクトボックスに特化したプラグインがあるので、そういうものを利用するのも良いかともいます。