Rails5でドロップダウンメニューの変更を検知しその値をRailsのインスタンス変数に代入する方法を教えていただけませんでしょうか？

Question

Railsアプリケーションを学習しながら作成しております。
そこで、ドロップダウンメニューの変更内容を検知しその検知した値をrailsのインスタンス変数に代入し、viewで条件分岐で処理を分けたいのです。

_form.html.erb　（現状のコード）

<%= markup do |m|
  p = ClientFormPresenter.new(f, self)
  m << p.notes
  p.with_options(required: true) do |q|
    m << q.drop_down_list_block(:prefecture, '都道府県', Request::PREFECTURE_NAMES)

　　m << q.drop_down_list_block(:agreement1, '北海道の名所', Client::AGREEMENTS)
    m << q.drop_down_list_block(:agreement2, '青森県の名所', Client::AGREEMENTS)
    m << q.drop_down_list_block(:agreement3, '岩手県の名所', Client::AGREEMENTS)
    m << q.drop_down_list_block(:agreement4, '宮城県の名所', Client::AGREEMENTS)
    m << q.drop_down_list_block(:agreement5, '秋田県の名所', Client::AGREEMENTS)
  end

HTMLのソースコード(都道府県のドロップダウンメニュー部分のみ）

<label class="required" for="client_prefecture">都道府県</label><select required="required" name="client[prefecture]" id="client_prefecture"><option value="">選択してください</option>
<option value="北海道">北海道</option>
<option value="青森県">青森県</option>
<option value="岩手県">岩手県</option>
<option value="宮城県">宮城県</option>
<option value="秋田県">秋田県</option>
・
・
・

たぶん以下のjavaScriptでドロップダウンメニューの変更を検知できると思います。
(参考書の記述をそのまま記述しました。）

account.js

const element = document.querySelector('#client_prefecture');
element.addEventListener('change', handleChange);
fanction handleChange(event) {
  const value = element.value;
}

ここまではなるほどと理解できました。
そこで、javaScriptで取得したvalue値で以下のように条件分岐をしたいのです。

全く見当がつかなかったので、思いついたままイメージだけでコードを記述します。

_form.html.erb　（現状のコード）

<%= markup do |m|
  p = ClientFormPresenter.new(f, self)
  m << p.notes
  p.with_options(required: true) do |q|
    m << q.drop_down_list_block(:prefecture, '都道府県', Request::PREFECTURE_NAMES)
　　if @prefecture == "北海道"
　　  m << q.drop_down_list_block(:agreement1, '北海道の名所', Client::AGREEMENTS)
    elsif @prefecture == "青森県"
      m << q.drop_down_list_block(:agreement2, '青森県の名所', Client::AGREEMENTS)
    elsif @prefecture == "岩手県"
      m << q.drop_down_list_block(:agreement3, '岩手県の名所', Client::AGREEMENTS)
    elsif @prefecture == "宮城県"
      m << q.drop_down_list_block(:agreement4, '宮城県の名所', Client::AGREEMENTS)
    else
      m << q.drop_down_list_block(:agreement5, '秋田県の名所', Client::AGREEMENTS)
    end
  end

イメージですがこのようにしたいのです。
エラーになるのはわかっていますが、javaScriptでドロップダウンメニューが変更された時点で@prefectureに値を代入するイメージです。（以下のようなイメージ）

account.js

const element = document.querySelector('#client_prefecture');
element.addEventListener('change', handleChange);
fanction handleChange(event) {
  const value = element.value;
}

@prefecture = value #ここでインスタンス変数に代入する。
これをviewで利用する。

こんなことができるのかもわからないのですが、どなたかご教授いただけないでしょうか？
よろしくお願いします。

Answer 1

別解と気になるところと
ttakatechさんの言われるように、javascript(やJQuery)を使ってブラウザ内で処理完了する方法の他、私のようにJSは苦手、な場合は、on_change でサーバに情報を送り、railsで処理した結果をもらって書き直す、という方法もあります。

で、提示されたViewのcodeで気になる点が３つあるので、ご質問の内容からはそれますが。。。。
1)Viewがrubyプログラム化している
viewの全体構造が見えにくくなるので、app/helpersやcontrollerに処理させる方が良いかと思います。
2)options_for_select,options_from_collection_for_select というRailsが用意しているhelperがあるので、それを調べてみて下さい
3)if,elsifで100行のプログラムになります。
これを後から読んでメンテする人は、各々のelsifはどこに違いがあるのか？とじっくり100行と対話することになり、読み、理解する速度が落ちます。

options = { "北海道" => [:agreement1, '北海道の名所'],
            '青森県' => [:agreement2, '青森県の名所'],
               :
           }

としておいて、
m << q.drop_down_list_block(*options[@prefecture], Client::AGREEMENTS)
とすれば、プログラム部は１行ですみ、かつ「処理はみな同じ」ということが一目でわかります。多分実行も早くなります。

Comments

[koume]

回答ありがとうございます。options_for_select,options_from_collection_for_selectについて調べてみます。そのほかのご指摘も大変勉強になりました。まだまだ学習不足を実感しました。今後ともよろしくお願いします。

Answer 2

いまいち全体像がつかめていませんが、回答してみます。

恐らく、サーバー側の処理とクライアント（ブラウザ）側の処理を混同されているかと思います。

テンプレートエンジン(Railsでいう<%= >）は、クライアント（ブラウザ）に送られる際にRailsがHTMLに変換します。つまり、<%= >の部分は、ブラウザで見たときにはただのHTMLです。@prefectureという変数も存在しません。

そもそもブラウザでは、HTML/css/javascript以外を処理することはできません。
クライアント側の操作をjavascriptで検知し、それをRailsのテンプレートエンジン内の変数に格納することは不可能です。

koumeさんの目的を邪推しますが、ユーザーがドロップダウンメニューで選んだ県に応じて、ページの一部表示を変更したいのだとお見受けします。
その場合、以下のコードをjavascriptで実装し、それをもとにHTML側を変更するコードを書く必要があります。

<%= markup do |m|
  p = ClientFormPresenter.new(f, self)
  m << p.notes
  p.with_options(required: true) do |q|
    m << q.drop_down_list_block(:prefecture, '都道府県', Request::PREFECTURE_NAMES)
　　if @prefecture == "北海道"
　　  m << q.drop_down_list_block(:agreement1, '北海道の名所', Client::AGREEMENTS)
    elsif @prefecture == "青森県"
      m << q.drop_down_list_block(:agreement2, '青森県の名所', Client::AGREEMENTS)
    elsif @prefecture == "岩手県"
      m << q.drop_down_list_block(:agreement3, '岩手県の名所', Client::AGREEMENTS)
    elsif @prefecture == "宮城県"
      m << q.drop_down_list_block(:agreement4, '宮城県の名所', Client::AGREEMENTS)
    else
      m << q.drop_down_list_block(:agreement5, '秋田県の名所', Client::AGREEMENTS)
    end
  end

目的にもよりますが生のjavascriptだけでなく、jQueryを使うこともご検討ください。

回答になっていれば幸いです。

Comments

[koume]

回答ありがとうございます。ttakatechさんのおっしゃる通りの動作がしたかったのです。
javaScript,jQueryの学習をして、再度トライしてみます。
大変参考になるご意見ありがとうございました。今後ともよろしくお願いします。

[ttakatech]

参考になったようで何よりです。
がんばってください。