WEBアプリやWEBサイトを開発していると、頻繁に利用される都道府県・市区町村プルダウンメニュー（都道府県連動型セレクトボックス）。
これってなかなか作るの大変ですよね。
都道府県一覧の取得は47個しかないのでいいとして、市区町村名になると1700を超える数になります。
統廃合による最新の市区町村名を取得したり、市区町村コードを取得したり、最新の情報を取得しながらセレクトボックスを維持するのはホント大変です。
そこで、本記事では最新の市区町村データを提供するとともに、jQueryを使って、この都道府県連動型・市区町村プルダウンメニュー（セレクトボックス）をなるべく少ない行数で実装してみましたので、もしよかったらご自由にお使いいただいたり、参考にしていただければお役に立てて嬉しい限りです。
※コード1行が削除され、更に少ないコードによる実装となりました。
（2021年3月1日 更改）
基本データ（都道府県・市区町村 json形式データ）
当ブログで提供している都道府県・市区町村のjsonデータ形式です。
[{"01":{"id":"01","pref":"北海道","en":"hokkaido","city":[{"id":"01100","name":"札幌市"},{"id":"01101","name":"中央区"}, ・・・]
となっています。
- キー
- id：都道府県コード
- pref：都道府県名
- en：都道府県英字名
- city：市区町村データ（id：市区町村コード、name：市区町村名）
「都道府県・市区町村jsonデータ」は毎日更新しています。
↓こちらのリンク↓から無料でダウンロードでき、ご自由にお使いいただけます。
都道府県・市区町村 jsonデータ
（最終更新日：2022年09月28日 04時00分05秒）
※クリックでダウンロードできない場合は、右クリックでリンク先を保存してください。
※「都道府県・市区町村jsonデータ」をご利用の際はダウンロードしてお使いください。
余談ですが、「都道府県・市区町村jsonデータ」の収集、jsonファイル化は筆者の開発メイン言語であるGo言語（Golang）で行っています。
jQueryで都道府県連動型市区町村プルダウンメニューを作る
サンプル
動作確認用のセレクトボックスです。
JavaScriptソース
下記のJavaScriptを実行するには予めjQueryライブラリを読み込んでおく必要があります。
（下記コードは一例です。）
<script
src="https://code.jquery.com/jquery-3.6.0.js"
integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk="
crossorigin="anonymous"></script>
// 都道府県フォーム生成
$(function() {
$.getJSON('pref_city.json', function(data) {
for(var i=1; i<48; i++) {
var code = ('00'+code).slice(-2); // ゼロパディング
$('#select-pref').append(''+data[i-1][code].pref+'');
}
});
});
// 都道府県メニューに連動した市区町村フォーム生成
$('#select-pref').on('change', function() {
$('#select-city option:nth-child(n+2)').remove(); // ※1 市区町村フォームクリア
var select_pref = ('00'+$('#select-pref option:selected').val()).slice(-2);
var key = Number(select_pref)-1;
$.getJSON('pref_city.json', function(data) {
for(var i=0; i<data[key][select_pref].city.length; i++){
$('#select-city').append(''+data[key][select_pref].city[i].name+'');
}
});
});
3行目の$.getJSON('pref_city.json', function(data) {のpref_city.jsonは、本サイトで提供している市区町村データ「都道府県・市区町村jsonデータ」を読み込んでいますので、ダウンロードした「都道府県・市区町村jsonデータ」を設置した場所に応じて、適宜パスを変更してください。
12行目～で都道府県コードに連動した市区町村プルダウンメニューを生成しています。
ちょっと配列が複雑でわかりにくいかもしれませんが、配列を分解すると、
data[key][select_pref]に選択された都道府県コードが入ります。data[key][select_pref]（選択された都道府県）のcity[i].idで順次for文で市区町村コードを取得しています。- 同様に
city[i].nameで市区町村名を取得して、都道府県のセレクトメニューに連動した市区町村セレクトメニューを作成しています。
※key値と都道府県コードが1ずつずれているため余計な処理が入っているので、ここを調整すればもっとスッキリできると思います。
例）北海道：key=0,都道府県コード=01
また、都道府県を切り替えた時に、前に選択していた都道府県の市区町村がフォームに残るので、※1の箇所で1行目（「市区町村を選択してください」などの初期表示行）以外を削除しています。
HTMLソース
<select id="select-pref"><option value="">都道府県を選択してください</option></select>
<select id="select-city"><option value="">市区町村を選択してください</option></select>いかがでしたでしょうか？
もっとコンパクトに都道府県連動市区町村セレクトボックスを書けるかもしれませんので探求したいと思います。
現実的には、クライアント様やその時々の状況で、バラバラな書き方をしてきましたので、可能な限り統一してかつ簡潔に書いていきたいと思う今日このごろです。
