[jQuery]プルダウンで選んだ値をform_withのparamsにブチ込む方法

経緯

form_with内にselectを書くことができないけど、選択された値をparamsとしてsubmitさせたい。
そんなときどうしたらいいの！？！？
そんな僕に似た状況の方の救いになればいいなと思い記事を書くことにしました！

断り

今回はjQueryを使って表現します

結論

こうしましょう

<%= form_with url: XXX_path do |f| %>
   <%= f.hidden_field :ueno_zoo, value: :panda, class: 'targetJquery' %>
   <%= f.submit '送信'%>
<% end %>

hidden_fieldに対して:ueno_zooを渡す。
こうすると、コントローラーでparams[:ueno_zoo]とすることで送られてきた(選ばれた)値を取得することができます

ポイント
hidden_field(だけに限らず)に渡したSymbolの値を、コントローラー内ではparams[:Symbol]とすることで取得できる

<div>
  <% options = [
    ['パンダ', :panda],
    ['ゾウ', :elephant],
    ['キリン', :giraffe],
    ['キャベツ', :cabbage]
  ] %>
  <%= select_tag :ueno_zoo, options_for_select(options, :default), onchange: "$('.targetJquery').val($(this).val());" %>
</div>

options_for_select...第１引数に選択肢を、第２引数にデフォルトの値を指定する

onchange...指定したDOMの値が変更されるたびに発火するイベントリスナー

onchange: "$('.targetJquery').val($(this).val());"...
コード通り読むと、このselect_tagで選ばれた値を、hidden_fieldのvalueにするよって感じです。

つまり、ページが開かれたときセレクトボックスにはパンダが選ばれています。ゾウを選ぶと、hidden_fieldのvalueもelephantになるというわけです。