【HTMLコピペ】都道府県一覧のセレクトボックスの雛形

こんにちは。

ゆうや（@yuyaphotograph）です！

この記事では、

都道府県選択のセレクトボックスのHTMLコーディングをコピペで済ませたい

という方のお悩みを解決します！

都道府県セレクトボックスの表示サンプル
都道府県セレクトボックスの雛形まとめ
まとめ

都道府県セレクトボックスの表示サンプル

See the Pen
都道府県セレクトボックスコピペ by 石森裕也 (@yuyaphotograph)
on CodePen.

都道府県セレクトボックスの雛形まとめ

都道府県のvalueが連番のパターン

HTML

<select name="prefectures">
  <option value="" selected>都道府県を選択</option>
  <option value="1">北海道</option>
  <option value="2">青森県</option>
  <option value="3">岩手県</option>
  <option value="4">宮城県</option>
  <option value="5">秋田県</option>
  <option value="6">山形県</option>
  <option value="7">福島県</option>
  <option value="8">茨城県</option>
  <option value="9">栃木県</option>
  <option value="10">群馬県</option>
  <option value="11">埼玉県</option>
  <option value="12">千葉県</option>
  <option value="13">東京都</option>
  <option value="14">神奈川県</option>
  <option value="15">新潟県</option>
  <option value="16">富山県</option>
  <option value="17">石川県</option>
  <option value="18">福井県</option>
  <option value="19">山梨県</option>
  <option value="20">長野県</option>
  <option value="21">岐阜県</option>
  <option value="22">静岡県</option>
  <option value="23">愛知県</option>
  <option value="24">三重県</option>
  <option value="25">滋賀県</option>
  <option value="26">京都府</option>
  <option value="27">大阪府</option>
  <option value="28">兵庫県</option>
  <option value="29">奈良県</option>
  <option value="30">和歌山県</option>
  <option value="31">鳥取県</option>
  <option value="32">島根県</option>
  <option value="33">岡山県</option>
  <option value="34">広島県</option>
  <option value="35">山口県</option>
  <option value="36">徳島県</option>
  <option value="37">香川県</option>
  <option value="38">愛媛県</option>
  <option value="39">高知県</option>
  <option value="40">福岡県</option>
  <option value="41">佐賀県</option>
  <option value="42">長崎県</option>
  <option value="43">熊本県</option>
  <option value="44">大分県</option>
  <option value="45">宮崎県</option>
  <option value="46">鹿児島県</option>
  <option value="47">沖縄県</option>
</select>

都道府県のvalueが都道府県名のパターン

HTML

<select name="prefectures">
  <option value="" selected>都道府県を選択</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>
  <option value="沖縄県">沖縄県</option>
</select>

都道府県のvalueが都道府県のローマ字表記のパターン

HTML

<select name="prefectures">
  <option value="" selected>都道府県を選択</option>
  <option value="Hokkaido">北海道</option>
  <option value="Aomori">青森県</option>
  <option value="Akita">秋田県</option>
  <option value="Iwate">岩手県</option>
  <option value="Yamagata">山形県</option>
  <option value="Miyagi">宮城県</option>
  <option value="Fukushima">福島県</option>
  <option value="Ibaraki">茨城県</option>
  <option value="Tochigi">栃木県</option>
  <option value="Gunma">群馬県</option>
  <option value="Saitama">埼玉県</option>
  <option value="Kanagawa">神奈川県</option>
  <option value="Chiba">千葉県</option>
  <option value="Tokyo">東京都</option>
  <option value="Yamanashi">山梨県</option>
  <option value="Nagano">長野県</option>
  <option value="Niigata">新潟県</option>
  <option value="Toyama">富山県</option>
  <option value="Ishikawa">石川県</option>
  <option value="Fukui">福井県</option>
  <option value="Gifu">岐阜県</option>
  <option value="Shizuoka">静岡県</option>
  <option value="Aichi">愛知県</option>
  <option value="Mie">三重県</option>
  <option value="Shiga">滋賀県</option>
  <option value="Kyoto">京都府</option>
  <option value="Osaka">大阪府</option>
  <option value="Hyogo">兵庫県</option>
  <option value="Nara">奈良県</option>
  <option value="Wakayama">和歌山県</option>
  <option value="Tottori">鳥取県</option>
  <option value="Shimane">島根県</option>
  <option value="Okayama">岡山県</option>
  <option value="Hiroshima">広島県</option>
  <option value="Yamaguchi">山口県</option>
  <option value="Tokushima">徳島県</option>
  <option value="Kagawa">香川県</option>
  <option value="Ehime">愛媛県</option>
  <option value="Kochi">高知県</option>
  <option value="Fukuoka">福岡県</option>
  <option value="Saga">佐賀県</option>
  <option value="Nagasaki">長崎県</option>
  <option value="Kumamoto">熊本県</option>
  <option value="Oita">大分県</option>
  <option value="Miyazaki">宮崎県</option>
  <option value="Kagoshima">鹿児島県</option>
  <option value="Okinawa">沖縄県</option>
</select>

八地方区分のパターン

See the Pen
八地方区分のパターン by 石森裕也 (@yuyaphotograph)
on CodePen.

HTML

<select name="prefectures">
  <option value="">都道府県を選択</option>
  <option value="北海道">北海道</option>
  <optgroup label="東北">
  	<option value="青森県">青森県</option>
  	<option value="秋田県">秋田県</option>
  	<option value="岩手県">岩手県</option>
  	<option value="山形県">山形県</option>
  	<option value="宮城県">宮城県</option>
  	<option value="福島県">福島県</option>
  </optgroup>
  <optgroup label="関東">
  	<option value="茨城県">茨城県</option>
  	<option value="栃木県">栃木県</option>
  	<option value="群馬県">群馬県</option>
  	<option value="埼玉県">埼玉県</option>
  	<option value="千葉県">千葉県</option>
  	<option value="東京都">東京都</option>
  	<option value="神奈川県">神奈川県</option>
  </optgroup>
  <optgroup label="中部">
    <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>
  </optgroup>
  <optgroup label="近畿">
    <option value="三重県">三重県</option>
    <option value="滋賀県">滋賀県</option>
    <option value="京都府">京都府</option>
  	<option value="大阪府">大阪府</option>
  	<option value="兵庫県">兵庫県</option>
  	<option value="奈良県">奈良県</option>
  	<option value="和歌山県">和歌山県</option>
  </optgroup>
  <optgroup label="中国">
  	<option value="岡山県">岡山県</option>
  	<option value="広島県">広島県</option>
  	<option value="鳥取県">鳥取県</option>
  	<option value="島根県">島根県</option>
  	<option value="山口県">山口県</option>
  </optgroup>
  <optgroup label="四国">
  	<option value="徳島県">徳島県</option>
  	<option value="香川県">香川県</option>
  	<option value="愛媛県">愛媛県</option>
  	<option value="高知県">高知県</option>
  </optgroup>
  <optgroup label="九州沖縄">
  	<option value="福岡県">福岡県</option>
  	<option value="佐賀県">佐賀県</option>
  	<option value="長崎県">長崎県</option>
  	<option value="熊本県">熊本県</option>
  	<option value="大分県">大分県</option>
  	<option value="宮崎県">宮崎県</option>
  	<option value="鹿児島県">鹿児島県</option>
  	<option value="沖縄県">沖縄県</option>
  </optgroup>
</select>