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ベストアンサー
- 回答日時:
再現できないんですよねえ。
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の値を削除して試してみましたら。。。
できました!!!
きちんと最大幅に拡張されます!!
なぜー!??とものすごく不思議な気持ちですが、本当にありがとうございました!!
また何かありましたらよろしくお願い致します!!
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript console.logがどうしても2つ機能しないのでアドバイスをくださいお願いします 2 2022/07/07 22:13
- JavaScript 電車の運賃を出すプログラムを作っています。 2 2022/06/22 09:36
- JavaScript セレクトを全て選択されていないと、文字によるエラーメッセージを表示させるコードを調べています 2 2023/06/22 15:48
- JavaScript 以前の質問だと、どの条件でも配列が表示されてしまいます。 1 2022/07/09 11:40
- JavaScript JavascriptからSQLへ繋ぎ方が分からない 3 2022/07/07 00:27
- JavaScript 2段階プルダウンで1段階目の選択を終えた後に選択ボックスを見えなくしたい 2 2022/07/05 21:58
- JavaScript セレクトボックスで配列を呼び出したい。 1 2022/07/08 20:14
- JavaScript コードレビューをお願いします。 1 2022/07/16 05:38
- JavaScript 中百舌鳥駅と深井駅を入れ替えて選択しても同じ挙動にしたいです。 2 2022/06/24 18:45
- JavaScript セレクトボックスを2つ選択してメッセージなどを表示するには。~運賃検索プログラムを完成させたい~ 1 2022/07/22 11:10
このQ&Aを見た人はこんなQ&Aも見ています
-
プロが教えるわが家の防犯対策術!
ホームセキュリティのプロが、家庭の防犯対策を真剣に考える 2組のご夫婦へ実際の防犯対策術をご紹介!どうすれば家と家族を守れるのかを教えます!
-
HTMLフォームのSELECTの幅を一定にするためには?
HTML・CSS
-
セレクトボックスの幅を指定した状態で、選択肢の文字列を全て表示する方法
HTML・CSS
-
<SELECT>タグの折り返し
HTML・CSS
-
-
4
オプションメニューの中の文字を折り返したい
ホームページ作成・プログラミング
-
5
テーブルタグの中にdivを含めてはダメ?
HTML・CSS
-
6
[HTML]プルダウンメニューの横幅固定について
HTML・CSS
-
7
文字の横にプルダウンを表示させたいのですが、どうすればいいでしょうか?
HTML・CSS
-
8
至急!GetElementById でtdのidの値を取得、サブウインドに取得したデータを表示
JavaScript
-
9
JavaScriptでプルダウンのサイズを取得
JavaScript
-
10
<select> <option>の表示、件数設定
HTML・CSS
-
11
<TD><input type=text"></TD>でテキストボックスとセルの間にわずかな隙間があいてしまう・・"
HTML・CSS
-
12
JSPの中にhtmlファイルを埋め込みたい。
Java
-
13
Selectボックスの要素入力を省略したい
JavaScript
-
14
SELECTのプルダウンの長さの調整
HTML・CSS
-
15
透過背景を解除するにはどうすればいいのでしょうか?
HTML・CSS
-
16
HTMLからフォルダを開きたい
HTML・CSS
-
17
formで特定のinputを送信しないようにしたい
JavaScript
-
18
複数のボタンを等間隔に、かつ中央に配置する
HTML・CSS
-
19
同じIDで定義した要素の配列を取得したいが
JavaScript
-
20
HTMLの値の渡し方について質問です。 HTMLで値を今の画面から次の画面に渡すにはどういう文を使う
HTML・CSS
関連するカテゴリからQ&Aを探す
おすすめ情報
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
プルダウン 項目が多いので先頭...
-
Selectボックスの幅を自動で広...
-
CSVファイルを読みこみ、プルダ...
-
jQuery セレクトボックスで選択...
-
html selectの内容を初期値に戻す
-
jspに組込んだJavaScript でjava文
-
Selectの中身をfor文で入れる
-
プルダウンで現在の年月日を取...
-
セレクトメニューの連動 multip...
-
セレクトの値を取得できない
-
selectタグに直接onChangeを書...
-
ラジオボタンとドロップダウン...
-
<textarea>にプルダウンを表示...
-
現在時刻を取得してフォームのs...
-
セレクトボックスで現在選択さ...
-
セレクトを全て選択されていな...
-
JQuery selectが反映されない
-
HTMLコンボボックスへの項目追加
-
return trueとreturn falseの用...
-
submitボタン押下時にPOSTされ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
プルダウン 項目が多いので先頭...
-
Selectボックスの幅を自動で広...
-
Selectの中身をfor文で入れる
-
html selectの内容を初期値に戻す
-
CSVファイルを読みこみ、プルダ...
-
セレクトを全て選択されていな...
-
ブラウザの戻るボタンを押した...
-
JQuery selectが反映されない
-
jQuery セレクトボックスで選択...
-
セレクトの値を取得できない
-
テーブルにおける行(セルにプル...
-
現在時刻を取得してフォームのs...
-
javascriptでの2つのプルダウン...
-
document.form で nullまたは...
-
リストボックスの項目の順番を...
-
onFocusOutが複数回呼ばれる!
-
javascriptでselectボックスの<...
-
プログラムがうまく動きません...
-
親子連動型のselectを設置し、...
-
selectタグに直接onChangeを書...
おすすめ情報