専門家に聞いた!繰り返す痔の原因は!? >>

Selectボックスの幅を自動で広げたい

Jqueryを使って、DBから取得した値を下記のようにSelectボックスに入れています。

$('select#name).prepend('<option value="' + val[1] + '">' + val[2] + '</option>');


HTMLの方は下記のように設定してあり、

<select id="name"> </select>

値もきちんと挿入されます。

ただ、値が入ったあとのSelectボックスの幅が狭くて、選択した後に全部表示されていない状態です。

これを入れた値の文字数に応じて、またはこのSelectボックスが複数あるのですが、最大文字数に合わせた幅に自動で設定するのにはどうやってやればいいのでしょうか。

下記のように試してみたのですが、うまくいきませんでした。

<select id="name" style="width:auto;"></select>

<select id="name" style="width:100%;"></select>


どなたかおわかりの方いらっしゃいましたら教えてください、

よろしくお願い致します。

A 回答 (1件)

再現できないんですよねえ。


val[1]とval[2]に任意の長さの文字列をセットして
$('select#name).prepend('<option value="' + val[1] + '">' + val[2] + '</option>');
してもちゃんと、最大の幅に自動拡張されます。

もしかして、
<select id="name"> </select>
が同じidで複数あるのですか?
あるいは、<select>の親とか、CSS定義とかで、widthを
指定しているところがあるのでしょうか
    • good
    • 0
この回答へのお礼

yyr446さん

ありがとうございました。

なかなかお返事がつかなかったので、諦めていました。

適当にwidthの値を最大幅くらいで予め設定して対処していました。

今お返事内容を見て、ホントー!?と思い、同じidが複数あるわけでも、CSSを使っているわけでもなかったのですが、
もう一度適当につけたwidthの値を削除して試してみましたら。。。

できました!!!

きちんと最大幅に拡張されます!!

なぜー!??とものすごく不思議な気持ちですが、本当にありがとうございました!!

また何かありましたらよろしくお願い致します!!

お礼日時:2010/04/19 09:47

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人はこんなQ&Aも見ています

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

QHTMLフォームのSELECTの幅を一定にするためには?

HTMLフォームのSELECTの幅を一定にするためにはどのようにすれば
いいのでしょうか?

CSS等で設定できるとありがたいのですが、やり方がわかりません。

Aベストアンサー

<select style="width: 200px">

Qタグの折り返し

テーブルで横幅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>

宜しくお願いします。

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

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

<table border="1" width="100">
<tr>
 <td>
  <select name="test">
   <option value="d1">12345678901234567890123...続きを読む

Aベストアンサー

無理やりですが、こんなんではどうでしょうか?
<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>

Qセレクトボックスの幅を指定した状態で、選択肢の文字列を全て表示する方法

お世話になっております。

環境:
Windows2000
IE6.0

HTMLでセレクトボックス(SELECTタグ)を使用しているのですが、選択肢(OPTIONタグ)の文字列が長いと、セレクトボックスの幅も長くなってしまいます。

STYLESHEETでWIDTHを指定してみたのですが、選択肢の文字列が途中で切り取られてしまい、使えません。

セレクトボックスの幅を指定し、プルダウンで表示される選択肢の文字列は全て表示されるような方法があれば教えて下さい。

■ソース■
<html>
<head>
<STYLE TYPE="text/css">
<!--
SELECT {
width: 100px;
}
-->
</STYLE>
<title>サンプル</title>
</head>
<body>
<select name="" selected>
<option name="0">選択肢1</option>
<option name="0">長い文字列XXXXXXXXXXXXXXXXXXXXXXX</option>
<option name="0">選択肢3</option>
<option name="0">選択肢4</option>
</select>
</body>

お世話になっております。

環境:
Windows2000
IE6.0

HTMLでセレクトボックス(SELECTタグ)を使用しているのですが、選択肢(OPTIONタグ)の文字列が長いと、セレクトボックスの幅も長くなってしまいます。

STYLESHEETでWIDTHを指定してみたのですが、選択肢の文字列が途中で切り取られてしまい、使えません。

セレクトボックスの幅を指定し、プルダウンで表示される選択肢の文字列は全て表示されるような方法があれば教えて下さい。

■ソース■
<html>
<head>
<STYLE TYPE="text/css">
<!--
S...続きを読む

Aベストアンサー

おっしゃるとおり、SELECTタグのwidthを指定すると、オプションに書かれている文字列が長い場合は、途中で切られてしまいます。
これはプルダウンメニューの仕様で、どうすることも出来ません。
また、オプションタグは改行を受付ませんので、改行して表示することも出来ません。

すべての文字列を出力する方法は、
1.幅の固定をあきらめる(一番長い文字列に幅を合わせる)
2.オプションのフォントサイズを小さくする
が思いつきます。

1は・・・あきらめましょうということです・・・
2は、ちょっと見にくくなるかもしれませんが、オプションのフォントサイズを小さくして、物理的にすべての文字列を固定長の中に収めてしまおうという寸法です。
ただし、あるオプション限定でサイズを指定するということは出来ませんので、SELECTタグに対してフォントサイズの指定をすることになります。
SELECT {
width: 100px;
font-size: 8px;
}


このQ&Aを見た人がよく見るQ&A

人気Q&Aランキング