テスト - 都道府県選択プルダウンを選び易くする

動作サンプル


JSが適用されたselect要素1

※デフォルト選択項目が無い場合は、未選択状態で表示する

JSが適用されていないselect要素

※対象とするクラスが付加されていない場合はデフォルトのまま

JSが適用されたselect要素2

※デフォルト選択項目がある場合は、対象項目を選択状態で表示する


JSが適用されたselect要素3(optgroupなし)

※1 optgroup要素が使用されていない場合は、JS内で定義された地域にしたがって都道府県をグルーピングして表示する
※2 optgroup要素の使用を推奨



JSで生成される疑似プルダウンのhtmlソース

※「JSが適用されたselect要素2」での生成例
<div style="z-index: 150; position: absolute; top: 192px; left: 27px;" id="prefSelectExtension_menu">
<dl class="prefSelectExtension">
<dt class="prefSelectExtension_areaLabel">北海道</dt>
<dd class="prefSelectExtension_area">
<a href="javascript:prefSelectExtension.setSelectValue('1');" class="prefSelectExtension_link">北海道</a>
</dd>
<dt class="prefSelectExtension_areaLabel">東北</dt>
<dd class="prefSelectExtension_area">
<a href="javascript:prefSelectExtension.setSelectValue('2');" class="prefSelectExtension_link">青森</a>
<a href="javascript:prefSelectExtension.setSelectValue('3');" class="prefSelectExtension_link">秋田</a>
<a href="javascript:prefSelectExtension.setSelectValue('4');" class="prefSelectExtension_link">岩手</a>
<a href="javascript:prefSelectExtension.setSelectValue('5');" class="prefSelectExtension_link">山形</a>
<a href="javascript:prefSelectExtension.setSelectValue('6');" class="prefSelectExtension_link">宮城</a>
<a href="javascript:prefSelectExtension.setSelectValue('7');" class="prefSelectExtension_link">福島</a>
</dd>
<dt class="prefSelectExtension_areaLabel">関東</dt>
<dd class="prefSelectExtension_area">
<a href="javascript:prefSelectExtension.setSelectValue('8');" class="prefSelectExtension_link">栃木</a>
<a href="javascript:prefSelectExtension.setSelectValue('9');" class="prefSelectExtension_link">群馬</a>
<a href="javascript:prefSelectExtension.setSelectValue('10');" class="prefSelectExtension_link">茨城</a>
<a href="javascript:prefSelectExtension.setSelectValue('11');" class="prefSelectExtension_link">埼玉</a>
<a href="javascript:prefSelectExtension.setSelectValue('12');" class="prefSelectExtension_link">千葉</a>
<span class="prefSelectExtension_selected">東京都</span>
<a href="javascript:prefSelectExtension.setSelectValue('14');" class="prefSelectExtension_link">神奈川</a>
</dd>
<dt class="prefSelectExtension_areaLabel">中部</dt>
<dd class="prefSelectExtension_area">
<a href="javascript:prefSelectExtension.setSelectValue('15');" class="prefSelectExtension_link">山梨</a>
<a href="javascript:prefSelectExtension.setSelectValue('16');" class="prefSelectExtension_link">長野</a>
<a href="javascript:prefSelectExtension.setSelectValue('17');" class="prefSelectExtension_link">新潟</a>
<a href="javascript:prefSelectExtension.setSelectValue('18');" class="prefSelectExtension_link">富山</a>
<a href="javascript:prefSelectExtension.setSelectValue('19');" class="prefSelectExtension_link">石川</a>
<a href="javascript:prefSelectExtension.setSelectValue('20');" class="prefSelectExtension_link">福井</a>
<a href="javascript:prefSelectExtension.setSelectValue('21');" class="prefSelectExtension_link">静岡</a>
<a href="javascript:prefSelectExtension.setSelectValue('22');" class="prefSelectExtension_link">岐阜</a>
<a href="javascript:prefSelectExtension.setSelectValue('23');" class="prefSelectExtension_link">愛知</a>
</dd>
<dt class="prefSelectExtension_areaLabel">近畿</dt>
<dd class="prefSelectExtension_area">
<a href="javascript:prefSelectExtension.setSelectValue('24');" class="prefSelectExtension_link">三重</a>
<a href="javascript:prefSelectExtension.setSelectValue('25');" class="prefSelectExtension_link">和歌山</a>
<a href="javascript:prefSelectExtension.setSelectValue('26');" class="prefSelectExtension_link">奈良</a>
<a href="javascript:prefSelectExtension.setSelectValue('27');" class="prefSelectExtension_link">滋賀</a>
<a href="javascript:prefSelectExtension.setSelectValue('28');" class="prefSelectExtension_link">京都</a>
<a href="javascript:prefSelectExtension.setSelectValue('29');" class="prefSelectExtension_link">大阪</a>
<a href="javascript:prefSelectExtension.setSelectValue('30');" class="prefSelectExtension_link">兵庫</a>
</dd>
<dt class="prefSelectExtension_areaLabel">中国</dt>
<dd class="prefSelectExtension_area">
<a href="javascript:prefSelectExtension.setSelectValue('31');" class="prefSelectExtension_link">鳥取</a>
<a href="javascript:prefSelectExtension.setSelectValue('32');" class="prefSelectExtension_link">岡山</a>
<a href="javascript:prefSelectExtension.setSelectValue('33');" class="prefSelectExtension_link">島根</a>
<a href="javascript:prefSelectExtension.setSelectValue('34');" class="prefSelectExtension_link">広島</a>
<a href="javascript:prefSelectExtension.setSelectValue('35');" class="prefSelectExtension_link">山口</a>
</dd>
<dt class="prefSelectExtension_areaLabel">四国</dt>
<dd class="prefSelectExtension_area">
<a href="javascript:prefSelectExtension.setSelectValue('36');" class="prefSelectExtension_link">徳島</a>
<a href="javascript:prefSelectExtension.setSelectValue('37');" class="prefSelectExtension_link">香川</a>
<a href="javascript:prefSelectExtension.setSelectValue('38');" class="prefSelectExtension_link">愛媛</a>
<a href="javascript:prefSelectExtension.setSelectValue('39');" class="prefSelectExtension_link">高知</a>
</dd>
<dt class="prefSelectExtension_areaLabel">九州</dt>
<dd class="prefSelectExtension_area">
<a href="javascript:prefSelectExtension.setSelectValue('40');" class="prefSelectExtension_link">福岡</a>
<a href="javascript:prefSelectExtension.setSelectValue('41');" class="prefSelectExtension_link">佐賀</a>
<a href="javascript:prefSelectExtension.setSelectValue('42');" class="prefSelectExtension_link">長崎</a>
<a href="javascript:prefSelectExtension.setSelectValue('43');" class="prefSelectExtension_link">熊本</a>
<a href="javascript:prefSelectExtension.setSelectValue('44');" class="prefSelectExtension_link">大分</a>
<a href="javascript:prefSelectExtension.setSelectValue('45');" class="prefSelectExtension_link">宮崎</a>
<a href="javascript:prefSelectExtension.setSelectValue('46');" class="prefSelectExtension_link">鹿児島</a>
<a href="javascript:prefSelectExtension.setSelectValue('47');" class="prefSelectExtension_link">沖縄</a>
</dd>
<dt class="prefSelectExtension_areaLabel">その他</dt>
<dd class="prefSelectExtension_area">
<a href="javascript:prefSelectExtension.setSelectValue('48');" class="prefSelectExtension_link">海外</a>
</dd>
</dl>
</div>