ソフトウェア開発者の日常

こだわりなく書きたいことを書いていきます。

selectボックスで、長い文字列を折り返して表示するjQueryプラグイン

selectタグのoption要素として、ある名称を使ったところ、文字数が多すぎてはみ出す結果になりました。
文字数減らせばいいのですが減らすのも難しいので、なにか方法はないかと検索したところ、jQueryプラグインのChosenを見つけました。
Chosen: A jQuery Plugin by Harvest to Tame Unwieldy Select Boxes

長い文字列を折り返したうえで、検索機能も追加してくれます。
検索機能をオフする方法は、Hide Search on Single Selectと書かれたところでわかります。

使ってみて気づいたというか調べて対処したのが、optionタグの表示の幅が、selectの幅と異なる現象が起きました。
原因は、Chosenがliタグを使ってoptionタグ部分の表示を実現していて、僕が用意したcssがliタグの幅を指定していたからでした。
対処として、CSS

.chosen-results{
    width:500px;
}

というように、selectタグと同じ幅を指定したところ同じ幅で表示されるようになりました。