[Laravel]都道府県を選ぶと動的に市町村を絞り込みする方法

入力フォームで都道府県を選ぶとその県の市町村のみがプルダウンメニューで選べるようになる、みたいなよくあるやつを実装していきます。選択した都道府県によってプルダウンの中身が挿し変わります。

使用するAPI

いろいろ探していたら公的機関が提供しているAPIを見つけたのでこれを使います！

https://www.land.mlit.go.jp/webland/api.html

都道府県番号を指定すると市区町村コードと市区町村名を取得することが出来ます。

URLの例：www.land.mlit.go.jp/webland/api/CitySearch?area=13

都道府県テーブル作成

idと都道府県名を入れるだけのシンプルなテーブルを作成し、seederを使ってデータを入れておきます。

public function run()
   {
       $prefectures = [
           ['id' => '01', 'name' => '北海道'],
           ['id' => '02', 'name' => '青森県'],
           ['id' => '03', 'name' => '岩手県'],
           ['id' => '04', 'name' => '宮城県'],
           ['id' => '05', 'name' => '秋田県'],
           ['id' => '06', 'name' => '山形県'],
           ['id' => '07', 'name' => '福島県'],
           ['id' => '08', 'name' => '茨城県'],
           ['id' => '09', 'name' => '栃木県'],
           ['id' => '10', 'name' => '群馬県'],
           ['id' => '11', 'name' => '埼玉県'],
           ['id' => '12', 'name' => '千葉県'],
           ['id' => '13', 'name' => '東京都'],
           ['id' => '14', 'name' => '神奈川県'],
           ['id' => '15', 'name' => '新潟県'],
           ['id' => '16', 'name' => '富山県'],
           ['id' => '17', 'name' => '石川県'],
           ['id' => '18', 'name' => '福井県'],
           ['id' => '19', 'name' => '山梨県'],
           ['id' => '20', 'name' => '長野県'],
           ['id' => '21', 'name' => '岐阜県'],
           ['id' => '22', 'name' => '静岡県'],
           ['id' => '23', 'name' => '愛知県'],
           ['id' => '24', 'name' => '三重県'],
           ['id' => '25', 'name' => '滋賀県'],
           ['id' => '26', 'name' => '京都府'],
           ['id' => '27', 'name' => '大阪府'],
           ['id' => '28', 'name' => '兵庫県'],
           ['id' => '29', 'name' => '奈良県'],
           ['id' => '30', 'name' => '和歌山県'],
           ['id' => '31', 'name' => '鳥取県'],
           ['id' => '32', 'name' => '島根県'],
           ['id' => '33', 'name' => '岡山県'],
           ['id' => '34', 'name' => '広島県'],
           ['id' => '35', 'name' => '山口県'],
           ['id' => '36', 'name' => '徳島県'],
           ['id' => '37', 'name' => '香川県'],
           ['id' => '38', 'name' => '愛媛県'],
           ['id' => '39', 'name' => '高知県'],
           ['id' => '40', 'name' => '福岡県'],
           ['id' => '41', 'name' => '佐賀県'],
           ['id' => '42', 'name' => '長崎県'],
           ['id' => '43', 'name' => '熊本県'],
           ['id' => '44', 'name' => '大分県'],
           ['id' => '45', 'name' => '宮崎県'],
           ['id' => '46', 'name' => '鹿児島県'],
           ['id' => '47', 'name' => '沖縄県'],
       ];
       DB::table('prefectures')->insert($prefectures);
   }

form

{!! Form::select('prefecture',App\Models\Prefecture::selectList(),old('prefecture'),['class' => 'form-control','id' => 'prefecture','placeholder' => '▼都道府県']) !!}
//市区町村のプルダウンメニュー
<select name="city" id="city" class="form-control">
    <option value=""></option>
</select>

jsファイル

$(function () {
   //都道府県 が変更された場合
   $('[name=prefecture]').on('change', function () {
       //idが一桁の時はゼロうめする
       var prefecture_id = ('00' + $(this).val()).slice(-2);
       
       $.ajax({
           headers: {
               'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
           },
           type: "POST",
           url: "/ajax/city",
           data: { "prefecture_id": prefecture_id },
           dataType: "json"
       }).done(function (data) {
           //selectタグ（子） の option値 を一旦削除
           $('#city option').remove();
           //戻って来た data の値をそれそれ optionタグ として生成し、
           // city に optionタグ を追加する
           $.each(data['data'], function (id) {
               $('#city').append($('<option>').text(data['data'][id]['name']).attr('value', data['data'][id]['name']));
           });
           

       }).fail(function () {
           console.log("失敗");
       });
   });
 }

AjaxController

    /**
    * 選択肢た都道府県の市区町村を取得
    */
   public function getCityOptions(Request $request)
   {
       $url = "https://www.land.mlit.go.jp/webland/api/CitySearch?area=".$request->prefecture_id;
       $json = file_get_contents($url);
       $json = mb_convert_encoding($json,'UTF8','ASCII,JIS,UTF-8,EUC-JP,SJIS-WIN');
       $arr = json_decode($json,true);
       return $arr;
   }

Ajaxについての詳しい記事はこちらをご覧ください！