ドロップダウンリスト表示について
- ドロップダウンリスト表示についての質問です。
- サンプルソースのドロップダウンリストをカスタマイズしたい場合、HTML＆CSSのみで実現する方法を教えてください。
- ドロップダウンリストの表示を指定の都道府県までに制限し、スクロールバーで後の都道府県を表示させたいです。アドバイスをお願いします。
- ベストアンサー
ドロップダウンリストの表示について
下記のサンプルソースにてドロップダウンリストを作成、表示させた場合 リストボックス右側の下向矢印をクリックすると 北海道～福井県 までの20の県と、ボックス右側にはスクロールバーが表示されます。 また、福井県以降の県はスクロールバーの移動で表示されます。 例えばこれを・・・ リストボックス右側の下向矢印をクリックした時に表示される県を 北海道から群馬県までの10の県にしたい。 群馬県以降はリストボックス右側のスクロールバーの 下方向移動で表示させる。 ようにしたいのですが・・・ なるべくならば ＨＴＭＬ＆ＣＳＳ のみでこれを行いたいのですが どなたかアドバイス宜しくお願い致します。 ～ サンプルソース ～ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <title>サンプル</title> </head> <body> <select name="prefecture"> <option value="北海道">北海道</option> <option value="青森県">青森県</option> <option value="秋田県">秋田県</option> <option value="岩手県">岩手県</option> <option value="山形県">山形県</option> <option value="宮城県">宮城県</option> <option value="福島県">福島県</option> <option value="茨城県">茨城県</option> <option value="栃木県">栃木県</option> <option value="群馬県">群馬県</option> <option value="埼玉県">埼玉県</option> <option value="神奈川県">神奈川県</option> <option value="千葉県">千葉県</option> <option value="東京都">東京都</option> <option value="山梨県">山梨県</option> <option value="長野県">長野県</option> <option value="新潟県">新潟県</option> <option value="富山県">富山県</option> <option value="石川県">石川県</option> <option value="福井県">福井県</option> <option value="岐阜県">岐阜県</option> <option value="静岡県">静岡県</option> <option value="愛知県">愛知県</option> <option value="三重県">三重県</option> <option value="滋賀県">滋賀県</option> <option value="京都府">京都府</option> <option value="大阪府">大阪府</option> <option value="兵庫県">兵庫県</option> <option value="奈良県">奈良県</option> <option value="和歌山県">和歌山県</option> <option value="鳥取県">鳥取県</option> <option value="島根県">島根県</option> <option value="岡山県">岡山県</option> <option value="広島県">広島県</option> <option value="山口県">山口県</option> <option value="徳島県">徳島県</option> <option value="香川県">香川県</option> <option value="愛媛県">愛媛県</option> <option value="高知県">高知県</option> <option value="福岡県">福岡県</option> <option value="佐賀県">佐賀県</option> <option value="長崎県">長崎県</option> <option value="熊本県">熊本県</option> <option value="大分県">大分県</option> <option value="宮崎県">宮崎県</option> <option value="鹿児島県">鹿児島県</option> <option value="沖縄県">沖縄県</option> </select> </body> </html>
- Deep-Forest
- お礼率80% (89/111)
- HTML
- 回答数3
- ありがとう数3
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
無理でしょう。 そのまえに、ソースにかかれていませんが、HTML4.01では、selectは、form要素内でないと存在できません。 CSSのプロパティに、select要素のsize属性を変えるものがありません。 ある要素にポインターが乗った(hover)とき、もしくはフォーカスされた(focus)ときに、スタイルシートでsizeを変更できないということです。 javascriptを使って、HTMLソースを書き直すことになるでしょう。 optgroupを使ったほうがよいのではないかと・・ <select> <option lavel="北海道">北海道</option> <optgroup lavel="東北地方"> <option lavel="青森" value="aomori">青森県</opion> <option lavel="秋田" value="akita">秋田県</option> <option lavel="岩手" value="iwate">岩手県</option> valueはデフォルトで、<optipn></option>の内容を送信するので、同じものなら書く必要はないはず、valueは受信側の負荷を減らすためascii文字のほうがよいかと・・表示させる文字はlabelで指定したほうがスマートかも・・
その他の回答 (2)
- hrt_shu
- ベストアンサー率42% (27/64)
こちらを参考にしてみては？ http://q.hatena.ne.jp/touch/1104197465
お礼
ご回答頂きありがとうございます。 ご紹介されたサイトを閲覧してみましたが ちょっと今の自分の知識では・・・（涙）
- Frozen_
- ベストアンサー率51% (268/520)
おはようございます。 全く簡単ですよ。セレクトタグにサイズを指定すればOKです。 <select name="prefecture" size="10">
お礼
早速のご回答有難う御座います。 サイズ指定ですと初期表示から既に10件が表示されてしまいます。 あくまで最初の表示はボックス内に 北海道 一県のみとし、この状態からボックス右側の下矢印を クリックした時に10県を表示させたいのですが・・・ 説明不足で申し訳ございません・・・
関連するQ&A
- Ｅｘｃｅｌのドロップダウンリストについて
Sheet1において， Ａ列 Ｂ列 １ 田中太郎 ２ 佐藤次郎 ３ 山田三郎 のようなリストを作成してあるとします。 Sheet2において， A1のセルに１を入力すると，B1のセルに田中太郎と表示される様，B1にVLOOKUP($A1,Sheet1!$A$1:$B$3,2,0)と入力しています。 この時，A1をドロップダウンリストで入力する場合，リストの表示と入力値を変更するようなことはできるのでしょうか。 すなわち，リストには， 田中太郎 佐藤次郎 山田三郎 と表示され， 田中太郎 を選ぶとA1には1が入力され，B1にはVLOOKUP関数の効果として田中太郎と表示されるといった具合です。 当方，ＨＴＭＬは理解しておりますので，ＨＴＭＬで意図をご説明させていただければと思います。 ＨＴＭＬでプルダウンボックスを使う場合の入力として， <SELECT name="ボックス名"> <OPTION value="1">田中太郎</OPTION> <OPTION value="2">佐藤次郎</OPTION> <OPTION value="3">山田三郎</OPTION> </SELECT> ということになります。 これと同じようなことがエクセルで可能なのかどうかという質問でございます。
- ベストアンサー
- オフィス系ソフト
- Firefoxでのリストボックスのスクロール表示について質問です。
Firefoxでのリストボックスのスクロール表示について質問です。 Firefoxでは、スクロール表示に十分な幅が無い場合は、表示されないようです。 WindowsXP環境にて以下の2つのリストボックスを表示した際、 1つ目：縦スクロール表示なし（サイズが２なので幅が十分でない） 2つ目：縦スクロール表示あり（サイズが３なので十分な幅がある） となります。 -------------------------------------------------------- <select size="2"> <option value="1">1</option> <option value="2">2</option> <option value="3" selected="">3</option> <option value="4">4</option> <option value="5">5</option> </select> <select size="3"> <option value="1">1</option> <option value="2">2</option> <option value="3" selected="">3</option> <option value="4">4</option> <option value="5">5</option> </select> -------------------------------------------------------- これをWindows2000環境にて確認したところ どちらの縦スクロールも表示されました。 複数環境でテストしたところ以下のような結果となりました。 ・WindowsXP：スクロール表示なし ・WindowsVista：スクロール表示なし ・Windows2000 Professional/Server：スクロール表示あり ・Windows Server 2003：スクロール表示あり 解像度は全て1280×800です（他解像度でも試しましたが結果は同じでした）。 Firefoxのバージョンは、3.5.7です。 今のところ「OSに依存しているようだ」という見解ですが、はっきりしません。 ・他に要因があるのか？ ・OSもしくは他の要因であっても、スクロール表示の違いを明記したもの、もしくはバグ報告等がないか？（探してみましたが見つからなかったので） と思っています。 ご存知の方がいらっしゃれば、ご回答お願い致します。
- ベストアンサー
- HTML
- ドロップダウン、ラジオボタン、チェックボックス保持
PHP初心者です。 今会員登録のサイトを作っています。 入力画面（エラーチェック）→確認画面→登録完了 のページを作っているのですが、確認画面から「入力内容を修正する」をクリックして戻った時、チェックボックスははずれ、ドロップダウン、ラジオボタンは元の値に戻ってしまっています。 保持する場合、どのようなPHPを書けばよいでしょうか？ ↓はドロップダウンのサンプルです。 <dt> <label for="juusyo">住所</label> </dt> <dd> <select name="juusyo"> <option value="群馬県">群馬県</option> <option value="埼玉県">埼玉県</option> <option value="神奈川県">神奈川県</option> <option value="千葉県">千葉県</option> <option value="東京都">東京都</option> <option value="山梨県">山梨県</option> <option value="長野県">長野県</option> <option value="新潟県">新潟県</option> </select> <input type="submit" name="kakunin" value="確認する"> </form> どなたかご教授くださればうれしいです。
- ベストアンサー
- PHP
- リストボックス全選択について
JavaScriptについて質問です。 リストボックスA,B と プルダウンC という画面項目があると仮定し、 submitボタンを押下したとき、 リストボックスA,Bの項目全てが全選択され、プルダウン項目はそのままにしたいと考えております。 下記のソースのように作成したのですが、 リストボックスが全選択されるところまでは良いのですが、 プルダウン項目が最後の項目が選択された状態になってしまいます。 リストボックスだけが全選択され、プルダウン項目はそのままにするにはどうしたら良いでしょうか。 かなり困ってます。 どなたか助けてください。。 以下ソースです。 <html> <head> <script language="JavaScript"> <!-- function selectAll(){ var str = document.getElementsByTagName("option"); for(i=0;i<str.length;i++){ str[i].selected = true; } } //--> </script> </head> <body> <table> <tr> <td> リストA<br> <select name="listboxA" multiple> <option value="サンプル1">サンプル1</option> <option value="サンプル2">サンプル2</option> <option value="サンプル3">サンプル3</option> </select> </td> <td> リストB<br> <select name="listboxB" multiple> <option value="サンプル4">サンプル4</option> <option value="サンプル5">サンプル5</option> <option value="サンプル6">サンプル6</option> </select> </td> <td> プルダウンC<br> <select name="Pdown"> <option value="サンプル7">サンプル7</option> <option value="サンプル8">サンプル8</option> <option value="サンプル9">サンプル9</option> </select> </td> </tr> </table> <br> <input type=submit value="送信" onClick="selectAll()"> </body> </html>
- 締切済み
- JavaScript
- <select>で表示されるプルダウンのボタンの色を変更したい
ご存知のかたがおられましたらお知恵を拝借させてください。 HTMLの<select>タグでプルダウンリストを表示することが出来ますが、このプルダウンリストの右に出る下向三角ボタン（▼）の色をCSSで変更することは出来ないでしょうか？ スクロールバーは変更できたのですが、この三角ボタンがどうしても変更できません。 出来れば、IE8で表示できる方法が好ましいです。 すみませんが、お力添えよろしくお願いいたします。
- ベストアンサー
- HTML
- リストボックスを使って検索フォームを作りたいのですが
教えて！ｇｏｏの質問フォームのようなものが作りたいのですが出来なくて困っています。 リストボックスを２つ設けて、最初のリストボックスから選んだ項目によって、次のリストボックスに表示させる項目を選択したいのですが。 例えば、下のlist1のリストボックスから「名前」を選んだ場合にはlist2のリストボックスに氏名を、「日付」を選んだ場合には日付をリストに表示したいですが．．． <SELECT name="list1"><OPTION value=default>検索項目</OPTION> <option value=name>名前</option>); <option value=date>日付</option>); <option value=team>チーム</option>); </SELECT> <SELECT name="list2"><OPTION value=default>氏名</OPTION> <option value=suzuki>鈴木</option>); <option value=sato>佐藤</option>); <option value=tanaka>田中</option>); </SELECT> <SELECT name="list2"><OPTION value=default>日付</OPTION> <option value=2004>2004年度</option>); <option value=2003>2003年度</option>); <option value=2002>2002年度</option>); </SELECT> 書き方や説明が分かりにくいかもしれませんが、よろしくお願いします。
- ベストアンサー
- PHP
- web上のリストボックス作成
あるHTMLで、リストボックスをDREAMWEAVERでさくせいしました。 リストを選択すると、選択された名前のHTMLに飛ぶように指定したのですが、 ネスケでは動いてくれるのですが、IEでは飛んでくれません. 原因を教えてください。以下のようなHTMLです。 このためのCGIはくんでいません。 <form name="form2"> <select name="month"onChange="MM_jumpMenu('parent',this,0)"size="0"multiple> <option value="1.html"> １ </option> <option value="2.html"> ２ </option> <option value="3.html"> ３ </option> <option value="4.html"> ４ </option> <option value="5.html"> ５ </option> </select> </form>
- ベストアンサー
- HTML
- <select> をmultiple にしている場合で、指定したサイズ
<select> をmultiple にしている場合で、指定したサイズより、optionが多い場合には、 スクロールバーが出ると思いますが、 下の方のoptionでスクロールしないと見れない項目を初期選択状態にしても、 最初にリストを表示したときには、スクロールが一番上にある状態で、 初期選択されているoptionが見えない状態になってしまいます。 multipleではないときは、初期選択状態のoptionのところまでスクロールバーが移動していて、 リストを表示したときには、スクロールバーを移動しなくても、初期選択のoptionを見ることができます。 【▼初期選択が見れるようにスクロールが移動している】 <HTML> <SELECT name="color" size=6 > <option value="red"> 赤 <option value="blue"> 青 <option value="yellow"> 黄 <option value="white" > 白 <option value="black"> 黒 <option value="purple"> 紫 <option value="orange"> オレンジ <option value="pink"> ピンク <option value="gold"> ゴールド <option value="silver" selected> シルバー </SELECT> </HTML> 【▼初期選択が見えない。スクロールが一番上にある】 <HTML> <SELECT name="color" size=6 multiple> <option value="red"> 赤 <option value="blue"> 青 <option value="yellow"> 黄 <option value="white" > 白 <option value="black"> 黒 <option value="purple"> 紫 <option value="orange"> オレンジ <option value="pink"> ピンク <option value="gold"> ゴールド <option value="silver" selected> シルバー </SELECT> </HTML>
- 締切済み
- JavaScript
- Excelのドロップダウンリストの枠拡大
お世話になります。 「データの入力規則」で30行のリストを元の値としてドロップダウンリストを作成しました。 下向き三角からリストを表示すると、リスト全体が表示されずにスクロールバーが表示されます。 添付図の赤枠線のように、リスト全体が一度に表示されるように、ドロップダウンリストの高さを拡大したいと思います。 その方法を教えてください。 よろしくお願いします。 OS： Windows 7 Enterprise SP-1 Office： Professional Plus 2010
- ベストアンサー
- その他MS Office製品
- <FORM>タグを使ったドロップダウンメニュー
以下のようなソースでドロップダウンメニューを作りました。 ---------------------------------------------------- <FORM> <SELECT NAME=list onchange=top.location.href=this.form.list.options[this.form.list.selectedIndex].value> <OPTION VALUE="index.htm">トップ <OPTION VALUE="new.htm">What's New! </SELECT> </FORM> ------------------------------------------------------ この時、「トップ」や「What's New！」などのボックス内に表示される文字の フォントサイズを大きくしたいのですが、何かよい方法はありませんでしょうか？？ できればIEとNNどちらのブラウザからでも見れるようにもしたいです。 よろしくお願いします。
- 締切済み
- HTML
お礼
有難う御座います。 完全解決には至りませんでしたが、optgroup の使用で 結構スッキリさせる事が出来ました。