下記のサンプルソースにてドロップダウンリストを作成、表示させた場合
リストボックス右側の下向矢印をクリックすると
北海道~福井県
までの20の県と、ボックス右側にはスクロールバーが表示されます。
また、福井県以降の県はスクロールバーの移動で表示されます。
例えばこれを・・・
リストボックス右側の下向矢印をクリックした時に表示される県を
北海道から群馬県までの10の県にしたい。
群馬県以降はリストボックス右側のスクロールバーの
下方向移動で表示させる。
ようにしたいのですが・・・
なるべくならば HTML&CSS のみでこれを行いたいのですが
どなたかアドバイス宜しくお願い致します。
~ サンプルソース ~
<!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>
No.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で指定したほうがスマートかも・・
No.2
- 回答日時:
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・人生のプチ美学を教えてください!!
- ・10秒目をつむったら…
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・【大喜利】【投稿~9/18】 おとぎ話『桃太郎』の知られざるエピソード
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
テーブル内でドロップダウンメ...
-
<SELECT>タグの折り返し
-
セレクトメニューで2つの項目...
-
selectタグ内の特定のoptionの...
-
[html]ラジオボタンを使った診...
-
セレクトボックスから別窓にジ...
-
JSONで文字列が長い時
-
Application.ScreenUpdating = ...
-
16進の10進変換について
-
関数「exists」と「defined」の...
-
switch文のエラーについて
-
formで特定のinputを送信しない...
-
VBAでPDFのコピーとリネームを...
-
Perlで自分自身の関数名を知る...
-
Perlからメール送信で文字化け
-
python3について。
-
子windowsからsubmit()後にclos...
-
コンボボックスのtag情報の取得...
-
エクセルVBA シート名の部分一...
-
Sendmailの文字化けについて
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
文字の横にプルダウンを表示さ...
-
<SELECT>タグの折り返し
-
セレクトメニューで2つの項目...
-
テーブル内でドロップダウンメ...
-
セレクトボックスのselected属...
-
複数列を持ったリストボックス...
-
同じものを繰り返し表示させる
-
セレクトボックスから別窓にジ...
-
セレクトボックスの「選択して...
-
セレクトボックスである項目を...
-
プルダウンメニューの幅
-
SELECT OPTIONの中身をコピペ...
-
プルダウンリストの背景色の指定
-
selectタグ内の特定のoptionの...
-
ドロップダウンリストのselecte...
-
【プルダウンで選んでGOボタン...
-
セレクトメニューで選んだ値を...
-
セレクトボックスの中を一部隠...
-
プルダウンメニューのターゲッ...
-
HTMLでメディアプレイヤーの再...
おすすめ情報