0
0

More than 1 year has passed since last update.

【Rails】options_from_collection_for_selectの使い方

Posted at

実現したいこと

ECサイトの注文情報を入力する画面で、
既に登録されている配送先を、セレクトボックスから選択できるラジオボタンを作る。

ざっくり手順

1. form_withでデータを送る準備をする
2. radio_bottunを設置する
3. セレクトボックスに登録済みの住所を選択肢として表示させる

1. form_withでデータを送る準備をする

orders/new.html.erb
<%= form_with model: @order, url: orders_confirm_path do |f| %>
<% end %>

解説

form_withの引数の意味をよく忘れてしまうためここにメモとして残しておきます。
・ model: @order...保存したいテーブルのインスタンス
(Ordersテーブルに新たに情報を追加したいのでコントローラーで@order = Order.newと定義する。)
・ url: orders_confirm_path...フォームに入力された情報を飛ばす先のパス (今回は注文確認画面)

radio_bottunを設置する

orders/new.html.erb
<%= form_with model: @order, url: orders_confirm_path do |f| %>
  <%= f.radio_button :address_option, 1 %> #追記部分
  <%= f.label :address_option, "登録済住所から選択" %> #追記部分
 <% end %>

解説

・:address_option...どのカラムに保存したいかを指定。
 (今回は何の住所をラジオボタンで選択したか、を保存するカラムが(必要)ないため適当なカラム名を指定し、一時的に保存する用に使う)
・1...このラジオボタンを選択したら、1という値をデータとして保存するよの意味。
・f.label...radio_bottunに名前をつける。
・<%= f.label :カラム名, "表示する値" %>

セレクトボックスに登録済住所を選択肢として表示させる

orders/new.html.erb
<%= form_with model: @order, url: orders_confirm_path do |f| %>
  <%= f.radio_button :address_option, 1 %> 
  <%= f.label :address_option, "登録済住所から選択" %>
    <%= f.select :address_id, options_from_collection_for_select(Address.all, :id, :address_display) %>#追記部分
<% end %>

解説

・f.selectでセレクトボックスを作る
・:address_id...どのカラムに保存したいかを指定。
 (今回はどの住所をセレクトボックス内で選択したか、を保存するカラムが(必要)ないため適当なカラム名を指定し、一時的に保存する用に使う)
・options_from_collection_for_select...モデルの情報を引っ張ってきてセレクトボックスを作る。
・(引数1)Address.all...どのモデルからデータを引っ張ってくるかを指定。(今回はAddressテーブルの全て)
・(引数2):id...セレクトボックスで何を選択したかはAddressテーブルのidを使ってデータとして引き渡すよ。
・(引数3)::address_display...ビューで表示させるもの
※今回はAddressテーブル内の郵便番号、住所、宛名をまとめて表示させたいため、Addressモデルに3つまとめて表示させるためのメソッドを定義する。
models/address.rb
  def address_display
  '〒' + postal_code + ' ' + address + ' ' + name
  end

おわりに

学習したことの記録として初めて記事を書いたので、理解が間違っている部分がありましたらご教示いただけますと嬉しいです。
0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0