都道府県連動型市区町村プルダウンメニューをjQueryでできる限り少ないコード数で書いてみた

2020-11-23 jQuery json HTML 都道府県市区町村プルダウンメニューセレクトメニュー

Share on:

この記事は約4 分で読めます。

基本データ（都道府県・市区町村 json形式データ）

当ブログで提供している都道府県・市区町村のjsonデータの形式は、

[{"01":{"id":"01″,"pref":"北海道","en":"hokkaido","city":[{"id":"01100″,"name":"札幌市"},{"id":"01101″,"name":"中央区"}, ・・・]

となっています。

キー
id：都道府県コード
pref：都道府県名
en：都道府県英字名
city：市区町村データ（id：市区町村コード、name：市区町村名）

常に最新の「都道府県・市区町村jsonデータ」は↓こちらのリンク↓からダウンロードできます。

※「都道府県・市区町村jsonデータ」は月1回更新しています。
※クリックでダウンロードできない場合は、右クリックでリンク先を保存してください。
※「都道府県・市区町村jsonデータ」ご利用の際はダウンロードしてお使いください。

都道府県・市区町村 jsonデータ（最終更新日：2020年10月14日）

jQueryで都道府県連動型市区町村プルダウンメニューを作る

サンプル

jQueryソース

 1<script>
 2// 都道府県フォーム生成
 3$(function() {
 4  $.getJSON('pref_city.json', function(data) {
 5    for(var i=0; i<47; i++) {
 6      var code = i+1;
 7      code = ('00'+code).slice(-2); // ゼロパディング
 8      $('#select-pref').append('<option value="'+code+'">'+data[i][code].pref+'</option>');
 9    }
10  });
11});
12
13// 都道府県メニューに連動した市区町村フォーム生成
14$('#select-pref').on('change', function() {
15  $('#select-city option:nth-child(n+2)').remove(); // ※1 市区町村フォームクリア
16    var select_pref = ('00'+$('#select-pref option:selected').val()).slice(-2);
17    var key = Number(select_pref)-1;
18    $.getJSON('pref_city.json', function(data) {
19      for(var i=0; i<data[key][select_pref].city.length; i++){
20        $('#select-city').append('<option value="'+data[key][select_pref].city[i].id+'">'+data[key][select_pref].city[i].name+'</option>');
21      }
22  });
23});
24</script>

4行目の$.getJSON('pref_city.json', function(data) {のpref_city.json（上記でダウンロードしたjsonファイル）は「都道府県・市区町村jsonデータ」を読み込んでいますので、「都道府県・市区町村jsonデータ」の設置場所によって、適宜パスを変更してください。

20行目で都道府県コードに連動した市区町村プルダウンメニューを生成しています。

ちょっと配列が複雑でわかりにくいかもしれませんが、配列を分解すると、

data[key][select_pref]に選択された都道府県コードが入ります。
data[key][select_pref]（選択された都道府県）のcity[i].idで順次for文で市区町村コードを取得しています。
同様にcity[i].nameで市区町村名を取得して、都道府県のセレクトメニューに連動した市区町村セレクトメニューを作成しています。

※key値と都道府県コードが1ずつずれているため余計な処理が入っているので、ここを調整すればもっとスッキリできると思います。
例）北海道：key=0,都道府県コード=01

また、都道府県を切り替えた時に、前に選択していた都道府県の市区町村がフォームに残るので、※1の箇所で1行目（「市区町村を選択してください」などの初期表示行）以外を削除しています。

HTMLソース

1<script
2  src="https://code.jquery.com/jquery-3.5.1.min.js"
3  integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
4  crossorigin="anonymous"></script>
5
6<select id="select-pref"><option value="">都道府県を選択してください</option></select>
7<select id="select-city"><option value="">市区町村を選択してください</option></select>

１行目でjQueryを読み込みます。

jQueryの読み込みの方法はいくつか種類がありますので、

などを参考にして下さい。

まとめ

いかがでしたでしょうか？

もっとコンパクトに都道府県連動市区町村プルダウンメニューを書けるかもしれませんので探求したいと思います。

現実的には、クライアント様やその時々の状況で、バラバラな書き方をしてきましたので、可能な限り統一してかつ簡潔に書いていきたいと思う今日このごろです。