都道府県と市町村の連動するプルダウンを更新(Update)させたい。

前提・実現したいこと

都道府県の連動するプルダウンを編集してデータを更新できるようにしたい。
Ruby(Rais)とJavaScriptで、都道府県-市町村の連動するプルダウンを作成しています。

edit.html.erbの

<%= form.select :city_id, {
'足立区': '足立区',
'荒川区': '荒川区',
'板橋区': '板橋区',
},{selected: "#{@post.city_id}"},{ id: 'js_city_category' , required: true}%>

** <%= form.select :town_id, {},{include_blank: "#{@post.town_id}"},{ id: 'js_town_id' , required: true}%>**

:city_idの方で区を選択したらJSが動いてtown_id:のプルダウンが追加されるんですが
データを更新したい場合もう一度city_idを変更しないとtown_idのプルダウンが更新されなくて困っています・・

上記のうように、〜区を変更しないとJSのイベントが着火せず市町村のプルダウンが更新されません。。。

初心者で右も左もわからず進めて来ているので、おかしな部分などあると思いますが
ご教示頂けますと幸いです。

該当のソースコード

edit.html.erb


  <h1>編集</h1> 
  <%= form_with model: @post do |form|%>
    <%= form.text_field :title, value:"#{@post.title}" %>
    <%= form.text_area :content ,value:"#{@post.content}"%>
    <%= form.number_field :price, value:"#{@post.price}" %>
    <%= form.select :prefectures, {'東京': '東京'},{ include_blank: '選択してください' },{ id: 'prefectures' , required: true}%>
    <%= form.select :city_id, {
      '足立区': '足立区',
      '荒川区': '荒川区',
      '板橋区': '板橋区',
      },{selected: "#{@post.city_id}"},{ id: 'js_city_category' , required: true}%>

    <%= form.select :town_id, {},{include_blank: "#{@post.town_id}"},{ id: 'js_town_id' , required: true}%>

ソースコード

edit.js

window.onload = function() { 

  // ジャンルの選択肢が変更された際の動作
  // 駅カテゴリー 選別 取得
  city_category = document.getElementById("js_city_category");
  console.log(city_category);
  // getElementById()でidを取得
  town_id = document.getElementById("js_town_id");
  
  // カテゴリが変更されたときchangeCategory関数に飛ばす
  city_category.onchange = changeCategory;
  // city_category.selected = changeCategory
}

// ジャンルの選択肢が変更された際の動作
function city_mix(city) {
  city.forEach(function(station) {
    var op = document.createElement("option");
    op.value = station.cd;
    op.text = station.label;
    town_id.appendChild(op);
  });
}

function changeCategory() {
  
  // 変更後のカテゴリを取得

  var changedCategory = city_category.value;
  switch (changedCategory) {
    case '足立区':
      setAdati();
      break;
    case '荒川区':
      setArakawa();
      break;
    case '板橋区':
      setItabasi();
      break;
  }

}

// if文で振り分けられる
function setAdati() {

  // 市区郡が選択されたときに駅名フォームの'選択してくだいさい'をnull

  town_id.textContent = null;

  // 駅の選択肢

  var Adati_station = [
      {cd:"", label:"選択して下さい"},
    
      {cd:"青井（１〜３丁目）", label:"青井（１〜３丁目）"},
      {cd:"青井（４〜６丁目）", label:"青井（４〜６丁目）"},
      {cd:"足立", label:"足立"},
      {cd:"綾瀬", label:"綾瀬"},
      {cd:"伊興", label:"伊興"},
      {cd:"伊興本町", label:"伊興本町"},
      {cd:"入谷", label:"入谷"},
      {cd:"入谷町", label:"入谷町"},
      {cd:"梅島", label:"梅島"},
      {cd:"梅田", label:"梅田"},
      {cd:"扇", label:"扇"},
      {cd:"大谷田", label:"大谷田"},
      {cd:"興野", label:"興野"},
      {cd:"小台", label:"小台"},
      {cd:"加賀", label:"加賀"},
      {cd:"加平", label:"加平"},
      {cd:"北加平町", label:"北加平町"},
      {cd:"栗原", label:"栗原"},
      {cd:"弘道", label:"弘道"},
      {cd:"江北", label:"江北"},
      {cd:"古千谷", label:"古千谷"},
      {cd:"古千谷本町", label:"古千谷本町"},
      {cd:"佐野", label:"佐野"},
      {cd:"皿沼", label:"皿沼"},
      {cd:"鹿浜", label:"鹿浜"},
      {cd:"島根", label:"島根"},
      {cd:"新田", label:"新田"},
      {cd:"神明", label:"神明"},
      {cd:"神明南", label:"神明南"},
      {cd:"関原", label:"関原"},
      {cd:"千住", label:"千住"},
      {cd:"千住曙町", label:"千住曙町"},
      {cd:"千住旭町", label:"千住旭町"},
      {cd:"千住東", label:"千住東"},
      {cd:"千住大川町", label:"千住大川町"},
      {cd:"千住河原町", label:"千住河原町"},
      {cd:"千住寿町", label:"千住寿町"},
      {cd:"千住桜木", label:"千住桜木"},
      {cd:"千住関屋町", label:"千住関屋町"},
      {cd:"千住龍田", label:"千住龍田"},
      {cd:"千住中居", label:"千住中居"},
      {cd:"千住仲", label:"千住仲"},
      {cd:"千住橋戸町", label:"千住橋戸町"},
      {cd:"千住緑町", label:"千住緑町"},
      {cd:"千住宮元町", label:"千住宮元町"},
      {cd:"千住元", label:"千住元"},
      {cd:"千住柳町", label:"千住柳町"},
      {cd:"竹の塚", label:"竹の塚"},
      {cd:"辰沼", label:"辰沼"},
      {cd:"中央本町（１、２丁目）", label:"中央本町（１、２丁目）"},
      {cd:"中央本町（３〜５丁目）", label:"中央本町（３〜５丁目）"},
      {cd:"椿", label:"椿"},
      {cd:"東和", label:"東和"},
      {cd:"舎人", label:"舎人"},
      {cd:"舎人公園", label:"舎人公園"},
      {cd:"舎人町", label:"舎人町"},
      {cd:"中川", label:"中川"},
      {cd:"西綾瀬", label:"西綾瀬"},
      {cd:"西新井", label:"西新井"},
      {cd:"西新井栄町", label:"西新井栄町"},
      {cd:"西新井本町", label:"西新井本町"},
      {cd:"西伊興", label:"西伊興"},
      {cd:"西加平", label:"西加平"},
      {cd:"西竹の塚", label:"西竹の塚"},
      {cd:"西保木間", label:"西保木間"},
      {cd:"花畑", label:"花畑"},
      {cd:"東綾瀬", label:"東綾瀬"},
      {cd:"東伊興", label:"東伊興"},
      {cd:"東保木間", label:"東保木間"},
      {cd:"東六月町", label:"東六月町"},
      {cd:"一ツ家", label:"一ツ家"},
      {cd:"日ノ出町", label:"日ノ出町"},
      {cd:"平野", label:"平野"},
      {cd:"保木間", label:"保木間"},
      {cd:"保塚町", label:"保塚町"},
      {cd:"堀之内", label:"堀之内"},
      {cd:"南花畑", label:"南花畑"},
      {cd:"宮", label:"宮"},
      {cd:"六木", label:"六木"},
      {cd:"本木", label:"本木"},
      {cd:"本木東町", label:"本木東町"},
      {cd:"本木西町", label:"本木西町"},
      {cd:"本木南町", label:"本木南町"},
      {cd:"本木北町", label:"本木北町"},
      {cd:"谷在家", label:"谷在家"},
      {cd:"谷中", label:"谷中"},
      {cd:"柳原", label:"柳原"},
      {cd:"六月", label:"六月"},
      {cd:"六町", label:"六町"}
    ];
  // 配列を繰り返し処理で回す。(value)には’Tosima’で選択された物が１つずつ入る
  city_mix(Adati_station);

}

行動規範の内容に同意します

回答1件

ベストアンサー

質問良くないです。問題の所にどう行くのか、という部分を丁寧に書かないと。
editの初期画面で townの選択肢初期値がほしいということですね？
form.select :town_id, {} の {} がいかんです。
form.select :town_id, @collection_town || {} として、action edit で @collection_town に cityに応じた初期値を入れてください。

投稿2021/12/28 00:51