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

質問

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>

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

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

回答No.1

yyr446 · ベストアンサー

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

もしかして、
<select id="name">　</select>
が同じidで複数あるのですか？
あるいは、<select>の親とか、CSS定義とかで、widthを
指定しているところがあるのでしょうか

お礼

yyr446さん

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

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

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

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

できました！！！

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

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

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