【javascript】セレクトボックス onchangeで選択されたものに合わせてoptionを自動生成する方法

  <!-- 最初のセレクトボックス -->   
  <select name="genre" id="genre" onchange="createList(this.value)">
    <option disabled selected>地域を選択してください</option>
    <option value="kanto">関東</option>
    <option value="tyubu">中部</option>
    <option value="kansai">関西</option>
  </select>
  <!-- 2つ目のセレクトボックス -->
  <select name="prefList" id="prefList" disabled>
    <option disabled selected>都道府県を選択してください</option>   <!-- 1つ目のセレクトボックスが未選択なら選択不可 -->
  </select>

  const prefMenu = {
    kanto: ["東京都", "神奈川県", "埼玉県", "千葉県", "群馬県", "栃木県", "茨城県"],
    tyubu: ["新潟県", "富山県", "石川県", "福井県", "山梨県", "長野県", "岐阜県", "静岡県", "愛知県"],
    kansai: ["大阪府", "京都府", "奈良県", "和歌山県", "滋賀県", "兵庫県"],
  };

  function createList(selectGenre) {
    let prefList = document.getElementById("prefList"); //2つ目のセレクトボックス取得
    prefList.disabled = false;  //  アクティブに
    prefList.innerHTML = "";  //  いったん空に
    let option = document.createElement("option");
    option.innerHTML = "都道府県を選択してください";  //  1つ目のオプション
    option.defaultSelected = true;  //  1つ目のオプションを初期選択に
    option.disabled = true; //  1つのオプションは選択不可
    prefList.appendChild(option);
    //  都道府県を自動生成
    prefMenu[selectGenre].forEach((pref) => {
      let option = document.createElement("option");
      option.innerHTML = pref;
      prefList.appendChild(option);
    });
  }

参考

【html】【javascript】セレクトボックスのoptionを自動生成し、今日現在の日付を初期設定する方法