SELECTのプルダウンの長さの調整

質問

困っております。。ご存じの方ぜひ教えて頂けたらと思います。

HTMLのSELECTタグでプルダウンを作成しています。
OPTIONで指定しているリストは１００件ほどあります。
この状態で▼を押してリストを表示すると、
縦が長すぎで、画面の外に飛び出る場合があります。
こうなると、スクロールバーもつまむことができないので
目的のものが選択できないことがあります。
プルダウンの表示長さを調節することはできませんでしょうか？

なお、SELECT以外の代替え案は勝手ながらご遠慮願います。
よろしくお願いしますm(_ _)m

回答No.3

神崎 渉瑠（@taloo） · ベストアンサー

> 縦が長すぎで、画面の外に飛び出る場合があります。

・・・ブラウザのバグと思います。
参考に、OSと、ブラウザの種類とバージョンを教えて戴けないでしょうか。
（Safari3.0にはブックマークが画面外に表示されて選択できなくなるバグがありましたが)

ネットブックのような画面が小さなパソコンでは、
都道府県（47項目）を表示するだけで画面サイズを超えますので、
そういうブラウザでは閲覧できなくなってしまいますね。
（IE7ではセレクトフィールドのプルダウンメニューにスクロールバーが表示されました)

> プルダウンの表示長さを調節することはできませんでしょうか？
残念ながらそういう方法はありません。

ブラウザベンダーに連絡して、バグを修正してもらうのを待つか、
代替案として<select size="">を指定したり、
<optgroup>で入れ子にしていくとか、
JavaScriptのフローティングウインドウ（ポップアップウインドウ）で擬似的にプルダウンメニューをつけるくらいしかないと思います。

横幅については

<option value="1" label="ほげ">あいうえおあいうえお・・・</option>

という、短く表示する方法もありますが、ブラウザが対応していない可能性の方が高いです。
（この例では「ほげ」が表示される・・・はず）

お礼

ご回答いただきましてありがとうございます。
ブラウザはchromeです。
JavaScriptの方法を試してみたいと思います。
ありがとうございます。

回答No.2

salonpath

縦の長さってかいてありますね、すみません。
スクロールバーがつまめないという表現から横の長さもそうとうなんだろうな、と勘違いしてしまったようです。

回答No.1

salonpath

長さって縦ですか？横ですか？

行数なら<select size="5"> で5行に。
横の長さならcssで、select{width:200px;}で200pxになります。

お礼

早速ご回答ありがとうございます！

size=5を試してみましたが、
プルダウン形式ではなく、リスト形式になってしまうようです。
▼をクリックしたときに５件だけ表示されたら
うれしいのですが・・・