動的な絞り込み検索機能（都道府県→市区町村）の実装を行いたい

Question

前提・実現したいこと

Laravelで都道府県選択ができる機能を作っています。
動的な絞り込み検索機能の実装につまづいております。

実現したいことは、
都道府県を選び、それに合った市区町村が選択できるようになることです。
例：「東京都」→「新宿区や港区など」 がプルダウンで選択可能

参考ソース：[JavaScript] 連動するセレクトボックス
参考：https://teratail.com/questions/22207

発生している問題・エラーメッセージ

下記のコードで試したところ、
都道府県のプルダウンは問題なく選択できるのですが、
市区町村のプルダウンが反応しません（選択もできず、市区町村の候補も表れません）

該当のソースコード

blade.phpの一部記載

                        <div class="form-group">
                            <script>
                                var hoge = @json($prefectures);
                            </script>

                            {!! Form::label('storage_prefecture_id', '都道府県') !!}
                            <select name="storage_prefecture_id" class="form-control col-md-6" id="storage_prefecture_id">
                            @foreach($prefectures as $prefecture)
                                    <option value="{{ $prefecture->id }}">{{ $prefecture->name }}</option>
                            @endforeach
                            </select>

                            @if ($errors->has('storage_prefecture_id'))
                                {!! Form::label('storage_prefecture_id', $errors->first('storage_prefecture_id')) !!}
                            @endif
                        </div>

                        <div class="form-group">
                            <script>
                                var foo = @json($cities);
                            </script>

                            {!! Form::label('storage_storage_city_id', '市区町村') !!}
                            <select name="storage_city_id" class="form-control col-md-6" id="storage_city_id">
                                @foreach($cities as $city)
                                    <option value="{{ $city->id }}">{{ $city->name }}</option>
                                @endforeach
                            </select>

                            @if ($errors->has('storage_city_id'))
                                {!! Form::label('storage_city_id', $errors->first('storage_city_id')) !!}
                            @endif
                        </div>

app.jsの一部記載

var pref = hoge
console.table(pref)

var cit = foo
console.table(cit)


window.onload=function(){
  for(var i=0; i<pref.length; i++){
    let op = document.createElement("option");
    op.value = pref[i].id;
    op.text = pref[i].name;
    document.getElementById("storage_prefecture_id").appendChild(op);
  }
}

function awake_pref(obj){
  var targetPref;
  if(obj.value == "1"){
    targetPref = cit;
  }else if(obj.value == "2"){
    targetPref = cit;
  }else if(obj.value == "3"){
    targetPref = cit;
　　　　|
　　　中略（obj.value == "4"~"47"）
　　　　|
  }else{
    targetPref = new Array();
  }
  var selObj = document.getElementById('storage_city_id');
  while(selObj.lastChild){
    selObj.removeChild(selObj.lastChild);
  }
  for(var i=0;i<targetPref.length;i++){
    let op = document.createElement("option");
    op.value = targetPref[i].id;
    op.text = targetPref[i].name;
    selObj.appendChild(op);
  }
}

var fuga = document.getElementById('storage_prefecture_id');
fuga.onchange = awake_pref(this);

DBには以下のようにデータが入っており、jsonで吐き出しております。

試したこと

多くの似たよなサンプルを探し、違うコードで試しましたが改善できませんでした。
プログラミング初学者のため、冗長かつ無駄なコードを書いており、
多分、prefecture_idを活用すべきだと思うのですが、行き詰まってしまいました。
一週間、色々試行錯誤しましたが一向に改善できないため、こちらの場でお力をお借りできればと思います。
お手数ですが、どうぞよろしくお願いいたします！

ご回答をいただき

このa, b, cはアロー関数を使用しない時、どのように扱えばよいのでしょうか。
また、書き方などに間違いがございましたら、ご指摘いただければ大変助かります。

const CREATE_OPTIONS = function(a, b) {
　a.innerText = '', [['選択してください',''],...b].forEach(function(c) {
　　a.appendChild (new Option (...c))
});
}
const GET_PREFECTURES = function(a) {
　a.map(function(b) {
　　return [b.name, b.id]
});
}
const GET_CITIES = function(a, b) {
　a.filter(function(c) {
　　return c.prefecture_id === b;
});
}
const SEARCH_ID = function(a) {
　document.querySelector(a);
}

window.onload = function () {
　CREATE_OPTIONS (SEARCH_ID ('#storage_prefecture_id'), GET_PREFECTURES(pref));
　SEARCH_ID ('#storage_prefecture_id').onchange =
　　({target:a}) => CREATE_OPTIONS(SEARCH_ID ('#storage_city_id'),GET_PREFECTURES(GET_CITIES(cit, parseInt(a.value,10))));
};

Answer 1

const CREATE_OPTIONS = function (target, ary) {
  var first = [['選択してください','']];

  target.innerText = '';
  ary = first.concat (ary);

  for (var i = 0, I = ary.length; i < I; i += 1) {
    var text = ary[i][0];
    var val  = ary[i][1];
    var opt = new Option (text, val);
    target.appendChild (opt);
  }
};


const GET_PREFECTURES = function (ary) {
  var rst = [ ];
  
  for (var i = 0, I = ary.length; i < I; i += 1) {
    var text = ary[i].name;
    var val  = ary[i].id;
    rst.push ([text, val]);
  }
  
  return rst;
}


const GET_CITIES = function (ary, id) {
  var rst = [ ];
  
  for (var i = 0, I = ary.length; i < I; i += 1) {
    if (ary[i].prefecture_id === id) {
      rst.push (ary[i]);
    }
  }
  
  return rst;
};


const SEARCH_ID = function(a) {
  return document.querySelector(a);
};


window.onload = function () {

  CREATE_OPTIONS (SEARCH_ID ('#storage_prefecture_id'), GET_PREFECTURES (pref));

  SEARCH_ID ('#storage_prefecture_id').onchange = function (event) {
    var select = event.target;
    var id = parseInt (select.value, 10);

    CREATE_OPTIONS(
      SEARCH_ID ('#storage_city_id'),
      GET_PREFECTURES (GET_CITIES (cit, id))
    );
  };
};

Answer 2

const
  A = (a, b)=> (a.innerText= '', [['--',''],...b].forEach (c => a.appendChild (new Option (...c)))),
  B = a => a.map (b=> [b.name, b.id]),
  D = (a, b) => a.filter (c=> c.prefecture_id == b),
  $$ = a => document.querySelector (a);
  
window.onload = function () {
  A ($$ ('#storage_prefecture_id'), B(pref));
  $$ ('#storage_prefecture_id').onchange =
    ({target:a}) => A($$ ('#storage_city_id'),B(D(cit, parseInt (a.value,10))));
};

Comments

[anusama]

ご回答いただき、大変ありがとうございます。
示していただいたコードで無事動かせることができました。

hai_haiさんのコードですが、
JavaScriptの知識が未だ浅い私には少し難しいところがあり、
未だ全ての理解に至っておりません。

自身で噛み砕き短縮形を戻す作業を行ったところ
a, b, c の理解が及びませんでした。
こちらは変数宣言などはしなくてよいのでしょうか。
「ご回答をいただき」に記載した私のコードですと、望んだ動きはしてくれない状況にあります。

お忙しいとこと、大変恐縮ではありますが、
後学のためにご教授いただければ幸いです。

[anusama]

hai_hai様
再回答、ありがとうございます！

先程、書き下しコードを読み大方理解することができました。
私のレベルに合わせ、非常に丁寧に記載いただき本当にありがとうございます。
40行が10行程のコードに短縮可能であることに驚いたのと、自身の力不足を実感しました。

再三になりますが、良い学びをご提供いただき、ありがとうございました！！