• ベストアンサー

セレクトボックスの幅をプルダウンしたときだけ大きくする

セレクトボックスの幅をあるサイズに固定した上で 項目を選ぶときだけ、項目が全部読めるサイズで 表示をする何て事は可能でしょうか？ ご存知の方がいらっしゃいましたら是非ご教授願います。 通常このサイズで・・・ ┌───┬─┐ │－－－│▽│ └───┴─┘ ▽を押すと・・・ ┌───────────┐ │項目１１１１１１１１１│ │項目２２２２２２２２２│ │項目３３３３３３３３３│ └───────────┘ といった感じです。

質問者が選んだベストアンサー

  • ベストアンサー
  • caraldo_k
  • ベストアンサー率100% (2/2)
回答No.1

<select style="width:100px;" onfocus="this.style.width='250px';" onblur="this.style.width='100px';"> <option>項目1</option> <option>項目2</option> <option>項目3</option> <option>項目4</option> <option>項目5</option> <option>項目6</option> <option>項目7</option> </select> なんて横着した形では如何でしょうか。 Fx2とIE7では確認しています。

ree111
質問者

お礼

onfocusとかonblurは知っているのに思いつきませんでした。 とても助かりました。ありがとうございました。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • セレクトボックス

    こんにちは。いつもお世話になっております。 セレクトボックスについて質問なのですが、JavaScrptを用いて セレクトボックスのどれかを自動的に選択する事は可能でしょうか？ 具体的には、年月日をとりだして、セレクトボックスの対応する項目を自動選択したいのです。 どなたかご存知の方いらっしゃいましたら、どうか教えてください。 よろしくお願いします。

  • セレクトボックスのスタイルについて

    http://www.lockon.co.jp/blog/javascript/post_7.html 上記のようなセレクトボックスの中身が変わるセレクトボックスで、 常に右のセレクトボックスの上から３番目までの背景色を固定にしたいのですが、どのようにすればいいかわからずにおります。 どなたかご教授ください。

  • セレクトボックスで警告

    Javascriptの初心者です。 セレクトボックスが二つ(a,b)あるとして、 セレクトボックスa中の項目いずれかを選択肢すると、 セレクトボックスbのどの項目をも選択できないようにするため、 警告をだしたいのですが、 よい方法をご教授していただけなでしょうか。 よろしくお願いいたします。

  • セレクトボックス自動表示

    セレクトボックスの自動表示についてわからないことがあり、投稿させていただきました。 内容は 数字のセレクトボックスを複数つくり、その複数セレクトボックスの数字を全部足した合計の数を表示させ、さらに合計の数字の分だけ別でセレクトボックスを表示させるという内容です。 例 1つ目のセレクトボックス　012・・・89 2つ目のセレクトボックス　012・・・89 とあり、1つめのセレクトボックスを2とし、２つめのセレクトボックスも2とした場合、 合計は4になります。 その後また別のセレクトボックスを4つ表示させるといったことをしたいのですが、記述方法がわかりません。 お分かりの方がいらっしゃいましたら、ご教授お願いいたします。

  • 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> どなたかおわかりの方いらっしゃいましたら教えてください、 よろしくお願い致します。

    • ベストアンサー
    • AJAX
  • テクストボックスからセレクトボックスへ

    １．テキストボックスにテキストを入力 ２．追加ボタンを押す ３．セレクトボックスに表示 ４．セレクトボックスに追加した項目を選択し削除ボタンで削除できる 以下のようなプログラムを教えていただけますでしょうか？

  • セレクトボックスを非表示にしたい。

    セレクトボックスを非表示にしたい。 <TR> </TR> の中にあるセレクトボックスを単に非表示にしたいと思っています。 どう書けばできるかわかりません。 CSSでもjabascriptでもできるだけ単純な書き方を見つけようと だいぶググりましたが、わかりませんでした。 簡単にできる方法は無いでしょうか？ どなたかご教授お願いいたします。

    • ベストアンサー
    • HTML
  • セレクトＢＯＸをプルダウン形式にしたいのですが・・・

    ＣＧＩ初心者です。セレクトボックスで表示しているものをプルダウン形式にしたいのですが、どこを直したらいいのか教えてください。 ちなみに、いまのスクリプトは $size1 = @part1 + 1; print "<td valign=top nowrap><font color=\"$t_color\">■</font> <B>ユーザ名</B><br>\n"; print "<select name=P1 size=\"$size1\">\n"; print "<option value=\"99\" selected>指定なし\n"; foreach (0 .. $#part1) { print "<option value=\"$_\">$part1[$_]\n"; } print "</select></td>\n"; です。

    • ベストアンサー
    • CGI
  • プルダウンメニュー表示時の高さの指定方法

    ブラウザ上でプルダウンメニューを表示させる際に、表示される高さ（タテ幅）の指定をするにはどうすればよいか、ご存知の方は教えていただけないでしょうか？ ちなみに、プルダウンメニューの横幅は、<select>タグ内に、「style="width:（幅を指定）;"」を記述することで固定幅の設定が可能でしたが・・・ なお、プルダウンメニューは初期表示として、１件のみ表示させるものとします（すなわち、<select>タグ内の「size="1"」の指定は変えないこととする）。 というのも、プルダウンに表示させる項目（条件によって可変）の件数が多い場合に、プルダウンメニュー内でスクロールさせるのをできるだけ避けたいためです。 よって、方法としては、 １．プルダウン表示させる際の高さ（タテ幅）を固定で指定する ２．可能であれば、登録されている全項目の表示をさせる 以上２つの方法を考えています。 なにかよい方法があれば、ぜひ教えてください。

    • ベストアンサー
    • HTML
  • セレクトボックス内のフォント位置

    はじめまして。 検索窓のフォームデザインで テキストフォールド、セレクトボックス、ボタン と横並びにしており、各ボックスの高さを デフォルトより少し大きくしようと思い、テキストフィールドの 文字を中央にするにはpaddingで調節できたんですが セレクトボックスの文字がIE8だと下揃えに firefoxだと上揃いになり、中央に揃えたいんですが 方法がわかりません。 文字を中央にしたいのはよくある最初の <option value="-" selected>選択して下さい</option> の箇所だけです。 セレクトボックスのフォントサイズを大きくしてごまかす事も可能ですがテキストフィールドの文字も大きくしないとバランスがおかしくなってしまいます。 ご存知の方がいましたらよろしくお願いします。

    • 締切済み
    • CSS

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する