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

2019-03-29

ナレッジ

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

WEBアプリを開発していると、頻繁に利用される都道府県・市区町村プルダウンメニュー（都道府県連動型セレクトメニュー）。

本記事ではjQueryを使って、この都道府県連動型・市区町村プルダウンメニューをなるべく少ない行数で書いてみましたので、参考になれば幸いです。

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

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

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

となっています。

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

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

都道府県・市区町村 jsonデータ

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

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

サンプル

jQueryソース

<script>
// 都道府県フォーム生成
$(function() {
  $.getJSON('pref_city.json', function(data) {
    for(var i=0; i<47; i++) {
      var code = i+1;
      code = ('00'+code).slice(-2); // ゼロパディング
      $('#select-pref').append('<option value="'+code+'">'+data[i][code].pref+'</option>');
    }
  });
});

// 都道府県メニューに連動した市区町村フォーム生成
$('#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('<option value="'+data[key][select_pref].city[i].id+'">'+data[key][select_pref].city[i].name+'</option>');
      }
  });
});
</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ソース

<select id="select-pref"><option value="">都道府県を選択してください</option></select>
<select id="select-city"><option value="">市区町村を選択してください</option></select>

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

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

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