railsでoptgroupを含んだセレクトボックスでの値の受け渡し方

i.M.D. Staff

2015.07.05

システム・プログラミング

railsでお問い合わせフォームを作成したのですがセレクトボックスで都道府県を選択する際に
確認画面への値の受け渡しがうまく行かずハマりました。
しかも普通のセレクトボックスではなくセレクトボックスの選択肢をグループ化する<optgroup>
を使い選択肢を階層化させなければいけませんでした。
railsを初めて触って思いましたがセレクトボックスの値の受け渡しがこんなに難しいと思いませんでした。

先輩社員のhgotoさんにお助けいただき、値の受け渡しを教えていただきました。
備忘録として下記に記述します。

■入力画面
/app/views/contact/index.html.erb
——————————————————————————————————

<%= form_for @contact, :html => {:id => ‘ContactConfirmForm’}, :url => contact_confirm_path do |f| %>
<table class=”table-standard”>
<tr>
<th>都道府県</th>
<td>
<ul>
<li>
<%= f.select(:pref,
grouped_options_for_select(Slecttest::Application.config.grouped_options_for_select_prefs),
include_blank: “▼選択して下さい”) %><p style=”color:red”><% if @contact.errors.any? %>
<%= @contact.errors.messages[:pref][0] %>
<% end %></p>
</li>
</ul>
</td>
</tr>
</table>
<ul id=”btn-area”>
<li class=”confirm”><%= f.submit ”, class: ‘btn btn-primary’ %></li>
</ul>
<% end %>

——————————————————————————————————

入力画面のイメージはこんな感じです

■確認画面
/app/views/contact/confirm.html.erb
——————————————————————————————————

<%= form_for @contact, :url => contact_thanks_path do |f| %>
<table class=”table-standard”>
<th>住所</th>
<td>
<ul>
<li><%= @contact.pref %><%= f.hidden_field :pref %></li>
</ul>
</td>
</tr>
</table>
<ul id=”btn-area”>
<li class=”send”><%= f.submit ”, :class => ‘btn btn-primary’ %></li>
</ul>
<% end %>

——————————————————————————————————

■configのapplication.rbに下記の配列を用意します。
/config/application.rb
——————————————————————————————————

module Slecttest
class Application < Rails::Application

config.grouped_options_for_select_prefs = [
[“北海道・東北”, [“北海道”,”青森県”,”岩手県”,”宮城県”,”秋田県”,”山形県”,”福島県”]],
[“関東”, [“東京都”,”神奈川”,”埼玉県”,”千葉県”,”茨城県”,”栃木県”,”群馬県”,”山梨県”]],
[“信越・北陸”, [“新潟県”,”長野県”,”富山県”,”石川県”,”福井県”]],
[“東海”, [“愛知県”,”岐阜県”,”静岡県”,”三重県”]],
[“近畿”, [“大阪府”,”兵庫県”,”京都府”,”滋賀県”,”奈良県”,”和歌山県”]],
[“中国”, [“鳥取県”,”島根県”,”岡山県”,”広島県”,”山口県”]],
[“四国”, [“徳島県”,”香川県”,”愛媛県”,”高知県”]],
[“九州・沖縄”, [“福岡県”,”佐賀県”,”長崎県”,”熊本県”,”大分県”,”宮崎県”,”鹿児島” ,”沖縄県”]],
[“その他”, [“海外”]]
]

config.active_record.raise_in_transactional_callbacks = true
end
end

——————————————————————————————————

これでoptgroupを含んだセレクトボックスの値の受け渡しができます。