はじめに
現在作成しているアプリの中で、collection_select
を使用する場面があり、備忘録のためにアウトプットします。
正直、このメソッドにたどり着くまでに、メチャクチャ時間がかかりました笑
collection_select
とは、モデルの情報を元に、セレクトボックスを生成できるメソッドです。
具体的に見ていきましょう!!
やりたかったこと
セレクトボックス内に、ユーザーの登録済住所を選択肢として用意したかったのですが、どのような記載方法が適切なのか、全然分からなくて、けっこう長い時間グーグル検索して辿り着いたのが、collection_select
です。
このセレクトボックスをクリックすると、
というように、登録している住所一覧が出るようにしたかったです!!
使い方
collection_select(オブジェクト名, メソッド名, 要素の配列, value属性の項目, テキストの項目 [, オプション or HTML属性 or イベント属性])
f.collection_select(メソッド名, オブジェクトの配列, value属性の項目, テキストの項目 [, オプション or HTML属性 or イベント属性])
使用例
<%= f.collection_select(:address_id, @addresses, :id, :order_address, prompt: "選択してください") %>
上のcollection_select
がHTMLでどうなっているのか確認すると、こうなっていました。
<select name="order[address_id]" id="order_address_id"><option value="">選択してください</option>
<option value="1">1111111京都市田中</option>
<option value="2">2222222アメリカ佐藤</option>
<option value="3">3333333インド安井</option>
</select>
それぞれの引数について確認しましょう!!
第一引数 → :address_id
第一引数(プロパティ名)は、selectタグのid属性とname属性に関係しています。
今回で言うと、
name="order[〜〜〜]" id="order_〜〜〜"
という風に反映されています。
第二引数 → :@addresses
第二引数(オブジェクトの配列)は、コントローラで
@addresses = Address.where(customer_id: current_customer.id)
と定義しています。
つまり、現在ログインしているユーザー(cuurent_customer)の登録済住所を全て取得しているということです。
第三引数 → :id
第三引数(value属性の項目)は、<option value="〜〜〜">
において。設定したい値のカラム名が入ります。
今回はidカラムの値を設定するので、上記記述となります。
第四引数 → :order_address
第四引数(テキストの項目)は、optionタグ内のテキスト<option>〜〜〜</option>
に設定したい値のカラム名が入ります。
第五引数 → prompt: "選択してください")
最後はオプションですが、これを付け足すことにより、選択してください
の文言が一番上に表示されるようになります。