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で質問しましょう!
このQ&Aを見た人はこんなQ&Aも見ています
-
許せない心理テスト
私は「あなたの目の前にケーキがあります。ろうそくは何本刺さっていますか」と言われ「12本」と答えたら…
-
フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
あなたが普段思っている「これまだ誰も言ってなかったけど共感されるだろうな」というあるあるを教えてください
-
映画のエンドロール観る派?観ない派?
映画が終わった後、すぐに席を立って帰る方もちらほら見かけます。皆さんはエンドロールの最後まで観ていきますか?
-
海外旅行から帰ってきたら、まず何を食べる?
帰国して1番食べたくなるもの、食べたくなるだろうなと思うもの、皆さんはありますか?
-
天使と悪魔選手権
悪魔がこんなささやきをしていたら、天使のあなたはなんと言って止めますか?
-
HTMLフォームのSELECTの幅を一定にするためには?
HTML・CSS
-
セレクトボックスの幅を指定した状態で、選択肢の文字列を全て表示する方法
HTML・CSS
-
SELECTのプルダウンの長さの調整
HTML・CSS
-
-
4
テキストエリア内の改行禁止
HTML・CSS
-
5
オプションメニューの中の文字を折り返したい
ホームページ作成・プログラミング
-
6
[HTML]プルダウンメニューの横幅固定について
HTML・CSS
-
7
<SELECT>タグの折り返し
HTML・CSS
-
8
SELECT 文 GROUP での1件目を取得
SQL Server
-
9
テーブルタグの中にdivを含めてはダメ?
HTML・CSS
-
10
JSPの中にhtmlファイルを埋め込みたい。
Java
-
11
至急!GetElementById でtdのidの値を取得、サブウインドに取得したデータを表示
JavaScript
-
12
jQuery セレクトボックスで選択されている値をもう一度選んだ時、イベントを実行させる方法
JavaScript
-
13
セレクトボックスの幅をプルダウンしたときだけ大きくする
JavaScript
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・人生のプチ美学を教えてください!!
- ・10秒目をつむったら…
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・【大喜利】【投稿~9/18】 おとぎ話『桃太郎』の知られざるエピソード
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
CSVファイルを読みこみ、プルダ...
-
プルダウン 項目が多いので先頭...
-
Selectボックスの幅を自動で広...
-
jQuery セレクトボックスで選択...
-
slickのレスポンシブ > center...
-
至急!GetElementById でtdの...
-
クリックされた罫表セルの行番...
-
フォームの値が0だったら空白...
-
return trueとreturn falseの用...
-
自動的に連番生成したURLにリン...
-
ドロップダウンリストの値の足...
-
XMLHttpRequestを利用してPHPへ...
-
チェックボックスにチェックが...
-
FormのonsubmitでJavaスクリプ...
-
フィールドを有効(enabled?)に...
-
Javascriptの"return "について
-
objectのindex値って取れますか?
-
プルダウン4つ連動+α
-
VBScriptでHTMLのセレクトボッ...
-
フォームの指定
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
プルダウン 項目が多いので先頭...
-
Selectボックスの幅を自動で広...
-
CSVファイルを読みこみ、プルダ...
-
jQuery セレクトボックスで選択...
-
JQuery selectが反映されない
-
selectメニューのselectedの位...
-
onFocusOutが複数回呼ばれる!
-
フォームのメニューリストを外...
-
セレクトを全て選択されていな...
-
現在時刻を取得してフォームのs...
-
Selectの中身をfor文で入れる
-
javascriptでselectボックスの<...
-
html selectの内容を初期値に戻す
-
ブラウザの戻るボタンを押した...
-
プルダウンで現在の年月日を取...
-
リストボックスの項目の順番を...
-
プルダウンとテキストの連動
-
<textarea>にプルダウンを表示...
-
DBの値を利用して、3つの連動し...
-
UWSCのIE操作でプルダウンを選...
おすすめ情報