![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?5a7ff87)
テーブルで横幅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ベストアンサー
- 回答日時:
無理やりですが、こんなんではどうでしょうか?
<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
- 回答日時:
No.1です。
ちょっとtomkeiferさんの要求と微妙に違うのですけでも、私、実はJavaScript苦手でして、
http://www.ueda.info.waseda.ac.jp/~gaku/js/how00 …
等を参照してアレンジしました。
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するとか。
すみません。力不足で。
この回答への補足
わざわざすみません、参考になります。
私もJavaScriptは苦手でして、しかも1つのソースにHTMLとCSSとJavaScriptが同居すると、眺めただけで思考が停止してしまいます。
贅沢いって本当にすみません。
これだと選択してマウスを離してやっと文章全部が表示されます。
なんとか<option>タグに対してonMouseOverとかのイベントを取得できないものかと試行錯誤やっていますが、うまくできません。
色々調べてみましたが、どうもoptionに対してonMouseOverが取得できるかどうかはブラウザ次第のようですね。
http://www.tohoho-web.com/wwwtags.htm
IE6.0はNGで、FireFoxはOKでした。
表示量が増えるけど、ラジオとチェックボックスにしようかと検討中です。
AN1=AN2さん、本当にご親切にありがとうございました。
他に良い方法をご存知の方いらっしゃいましたら、ご教授お願いします。
No.1
- 回答日時:
<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>で無いとだめなのでしょうか?
ラジオボタンやチェックボックスで対応できるのなら、そちらを使われるほうが良いと思いますよ。
この回答への補足
なるほど。目から鱗です。
が、残念ながら、実際には表示項目の部分は別データで存在しており、それをPerlで取り込んでHTMLを生成します。
ちょっと実用的ではないです。
ラジオボタンやチェックボックスも考えたのですが、データ量が多すぎるので表示部分が多くなりすぎてしまいます。
もしよろしければ、JavaScriptの方法を教えていただけませんでしょうか?
style="width:80px;" と横幅を固定しておいて、表示が切れてしまうものに対しては、バルーンヒントみたいにポップアップできればと思い調べているのですが.....
<option>タグに対して title や alt 属性は使用できないようですね。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript 1度きりではなく、繰り返し、挙動が変わるようにしていただきたいです。 1 2022/07/03 15:50
- JavaScript セレクトボックスで配列を呼び出したい。 1 2022/07/08 20:14
- JavaScript console.logがどうしても2つ機能しないのでアドバイスをくださいお願いします 2 2022/07/07 22:13
- JavaScript 電車の運賃を出すプログラムを作っています。 2 2022/06/22 09:36
- JavaScript セレクトボックスを2つ選択してメッセージなどを表示するには。~運賃検索プログラムを完成させたい~ 1 2022/07/22 11:10
- JavaScript 以前の質問だと、どの条件でも配列が表示されてしまいます。 1 2022/07/09 11:40
- JavaScript JavascriptからSQLへ繋ぎ方が分からない 3 2022/07/07 00:27
- JavaScript セレクトを全て選択されていないと、文字によるエラーメッセージを表示させるコードを調べています 2 2023/06/22 15:48
- JavaScript 中百舌鳥駅と深井駅を入れ替えて選択しても同じ挙動にしたいです。 2 2022/06/24 18:45
- JavaScript 2段階プルダウンで1段階目の選択を終えた後に選択ボックスを見えなくしたい 2 2022/07/05 21:58
このQ&Aを見た人はこんなQ&Aも見ています
-
賃貸で可能な古民家風レトロな部屋作りのコツ!改めて知る畳の高い機能性と魅力も紹介
畳の部屋を雰囲気のよい部屋に仕上げたい!賃貸住宅でもできる古民家風のレトロな部屋作りのコツを伺った。
-
オプションメニューの中の文字を折り返したい
ホームページ作成・プログラミング
-
セレクトボックスの幅を指定した状態で、選択肢の文字列を全て表示する方法
HTML・CSS
-
Selectボックスの幅を自動で広げたい
AJAX
-
-
4
HTMLフォームのSELECTの幅を一定にするためには?
HTML・CSS
-
5
SELECTのプルダウンの長さの調整
HTML・CSS
-
6
<input type=hidden" >で配列(複数の要素)を渡したいとき?"
PHP
-
7
未、済、完了の英訳は?
英語
-
8
formで特定のinputを送信しないようにしたい
JavaScript
-
9
jQuery セレクトボックスで選択されている値をもう一度選んだ時、イベントを実行させる方法
JavaScript
-
10
[HTML]プルダウンメニューの横幅固定について
HTML・CSS
関連するカテゴリからQ&Aを探す
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
<SELECT>タグの折り返し
-
selectタグ内の特定のoptionの...
-
複数列を持ったリストボックス...
-
テーブル内でドロップダウンメ...
-
セレクトボックスのselected属...
-
プルダウンメニューで中央表示
-
プルダウンリストの背景色の指定
-
文字の横にプルダウンを表示さ...
-
セレクトメニューで2つの項目...
-
optionのselectedは更新時は効...
-
セレクトボックスである項目を...
-
Application.ScreenUpdating = ...
-
メモリをアドレスを直接指定し...
-
JSONで文字列が長い時
-
VBAでPDFのコピーとリネームを...
-
実行時エラー 3020の対策
-
formで特定のinputを送信しない...
-
構造体の各データの表示につい...
-
16進の10進変換について
-
日齢計算プログラム
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
文字の横にプルダウンを表示さ...
-
セレクトメニューで2つの項目...
-
<SELECT>タグの折り返し
-
テーブル内でドロップダウンメ...
-
セレクトボックスのselected属...
-
複数列を持ったリストボックス...
-
optionのselectedは更新時は効...
-
プルダウンリストの背景色の指定
-
selectタグ内の特定のoptionの...
-
同じものを繰り返し表示させる
-
セレクトボックスから別窓にジ...
-
セレクトボックスの「選択して...
-
セレクトボックスの中を一部隠...
-
SELECT要素の垂直位置
-
セレクトボックスである項目を...
-
select や option のCSS設定
-
SELECT OPTIONの中身をコピペ...
-
セレクトメニューで選んだ値を...
-
html select optionが左寄せに...
-
プルダウンメニューがプルアップに
おすすめ情報