みんなの「教えて(疑問・質問)」にみんなで「答える」Q&Aコミュニティ

こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

ドロップダウンリストの表示について

下記のサンプルソースにてドロップダウンリストを作成、表示させた場合
リストボックス右側の下向矢印をクリックすると

北海道~福井県

までの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>

投稿日時 - 2011-07-16 07:14:39

QNo.6878667

困ってます

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

無理でしょう。
そのまえに、ソースにかかれていませんが、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で指定したほうがスマートかも・・

投稿日時 - 2011-07-16 16:47:09

お礼

有難う御座います。
完全解決には至りませんでしたが、optgroup の使用で
結構スッキリさせる事が出来ました。

投稿日時 - 2011-07-20 03:18:30

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(3)

ANo.2

こちらを参考にしてみては?
http://q.hatena.ne.jp/touch/1104197465

投稿日時 - 2011-07-16 08:00:16

お礼

ご回答頂きありがとうございます。

ご紹介されたサイトを閲覧してみましたが
ちょっと今の自分の知識では・・・(涙)

投稿日時 - 2011-07-20 03:21:03

ANo.1

おはようございます。
全く簡単ですよ。セレクトタグにサイズを指定すればOKです。

<select name="prefecture" size="10">

投稿日時 - 2011-07-16 07:27:59

お礼

早速のご回答有難う御座います。

サイズ指定ですと初期表示から既に10件が表示されてしまいます。

あくまで最初の表示はボックス内に
北海道 一県のみとし、この状態からボックス右側の下矢印を
クリックした時に10県を表示させたいのですが・・・

説明不足で申し訳ございません・・・

投稿日時 - 2011-07-16 07:48:15

あなたにオススメの質問