<SELECT>タグの折り返し

質問

テーブルで横幅100で囲った枠の中に、<select>タグを表示しています。
このとき、optionで表示する項目が長いと、テーブルの横幅が伸びてしまいます。
テーブルの横幅が伸びないようにする方法はないでしょうか？
できれば、optionの項目を折り返し表示するとか、プルダウンしたときだけテーブルを突き抜けて表示するとかできれば良いのですが。

たとえば、こんな感じです。

<table border="1" width="100">
<tr>
　<td>
　　<select name="test">
　　　<option value="d1">1234567890123456789012345678901234567890</option>
　　　<option value="d2">1234567890123456789012345678901234567890</option>
　　　<option value="d3">1234567890123456789012345678901234567890</option>
　　</select>
　</td>
</tr>
</table>

宜しくお願いします。

回答No.3

yambejp · ベストアンサー

無理やりですが、こんなんではどうでしょうか？
<select name="test" style="width:100" onFocus="this.style.width=''" onBlur="this.style.width=100">
<option value="d1">1234567890123456789012345678901234567890</option>
<option value="d2">1234567890123456789012345678901234567890</option>
<option value="d3">1234567890123456789012345678901234567890</option>
</select>

補足

すごい発想ですね。
私は<option>へのイベント取得ばかり考えていたので、こういう発想はまったく思い浮かばなかったです。
この方法を使わせていただこうと思います。
ありがとうございました。

回答No.2

cobun5513

No.1です。
ちょっとtomkeiferさんの要求と微妙に違うのですけでも、私、実はJavaScript苦手でして、
http://www.ueda.info.waseda.ac.jp/~gaku/js/how008.html
等を参照してアレンジしました。

selectのほうに簡単に識別できる略語をおき、textareaに表示させる形です。

--------
<script language="javascript">
function DispValue(form, select) {
v = select.value;

var str = document.getElementsByName("message")[0];
str.value += v;
}
</script>

<form method="post" name="hoge">
<table border="1" width="100">
<tr>
　<td>
　　<select name="sel" onchange="DispValue(this.form, this)">
　　　<option value="1234567890123456789012345678901234567890">1st item</option>
　　　<option value="1234567890123456789012345678901234567890">2nd item</option>
　　　<option value="1234567890123456789012345678901234567890">3rd item</option>
　　　<option value="1234567890123456789012345678901234567890">4th item</option>
　　　<option value="1234567890123456789012345678901234567890">5th item</option>
　　</select>
　　<textarea name="message" rows="10"></textarea>
　</td>
</tr>
</table>
</form>
----------

ただ、問題。
選択しなおしても、前のデータが残って列記されてしまう点と、Perlでテストしていないので、動作保証できないこと。

これをヒントに、JavaScriptを編集されては如何でしょう。
あと、プルダウンメニューってよくあるじゃないですか？アレのvalueをhiddenに埋め込んでpostするとか。

すみません。力不足で。

お礼

色々調べてみましたが、どうもoptionに対してonMouseOverが取得できるかどうかはブラウザ次第のようですね。
http://www.tohoho-web.com/wwwtags.htm

IE6.0はNGで、FireFoxはOKでした。

表示量が増えるけど、ラジオとチェックボックスにしようかと検討中です。
AN1=AN2さん、本当にご親切にありがとうございました。

他に良い方法をご存知の方いらっしゃいましたら、ご教授お願いします。

補足

わざわざすみません、参考になります。

私もJavaScriptは苦手でして、しかも１つのソースにHTMLとCSSとJavaScriptが同居すると、眺めただけで思考が停止してしまいます。

贅沢いって本当にすみません。
これだと選択してマウスを離してやっと文章全部が表示されます。
なんとか<option>タグに対してonMouseOverとかのイベントを取得できないものかと試行錯誤やっていますが、うまくできません。

回答No.1

cobun5513

<select>の大きさは基本的には一番長い<option>の長さに固定されます。これは仕様なので曲げようがありません。
CSSのwidthで大きさを決めることもできますが、そうすると、長い<option>が収まりきらない場合に表示されなくなります。

さて、それらを踏まえて強引に「見た目だけ」解決するならば、以下のようになるでしょう。
---------------
<table border="1" width="100">
<tr>
　<td>
　　<select name="test">
　　　<option value="d1">1234567890</option>
　　　<option value="d1">1234567890</option>
　　　<option value="d1">1234567890</option>
　　　<option value="d1">1234567890</option>
　　　<option>---------</option>
　　　<option value="d2">1234567890</option>
　　　<option value="d2">1234567890</option>
　　　<option value="d2">1234567890</option>
　　　<option value="d2">1234567890</option>
　　　<option>---------</option>
　　　<option value="d3">1234567890</option>
　　　<option value="d3">1234567890</option>
　　　<option value="d3">1234567890</option>
　　　<option value="d3">1234567890</option>
　　</select>
　</td>
</tr>
</table>
-----------------

しかし、これは思い切って意味の無い使い難いメニューですね^^
その他JavaScript等を驅使する方法もなくはないようですが、そうすると、JavaScript＝Offの人は見れなくなって意味がない。

ちょっと、回答にはなっていないのですが、
どうしても<select>で無いとだめなのでしょうか？
ラジオボタンやチェックボックスで対応できるのなら、そちらを使われるほうが良いと思いますよ。

お礼

style="width:80px;"　と横幅を固定しておいて、表示が切れてしまうものに対しては、バルーンヒントみたいにポップアップできればと思い調べているのですが.....
<option>タグに対して title や alt 属性は使用できないようですね。

補足

なるほど。目から鱗です。
が、残念ながら、実際には表示項目の部分は別データで存在しており、それをPerlで取り込んでHTMLを生成します。
ちょっと実用的ではないです。

ラジオボタンやチェックボックスも考えたのですが、データ量が多すぎるので表示部分が多くなりすぎてしまいます。

もしよろしければ、JavaScriptの方法を教えていただけませんでしょうか？