LoginSignup
3
3

More than 3 years have passed since last update.

[Rails]collection_selectについて勉強してみた![初心者]

Last updated at Posted at 2020-11-23

はじめに

現在作成しているアプリの中で、collection_selectを使用する場面があり、備忘録のためにアウトプットします。
正直、このメソッドにたどり着くまでに、メチャクチャ時間がかかりました笑

collection_selectとは、モデルの情報を元に、セレクトボックスを生成できるメソッドです。
具体的に見ていきましょう!!

やりたかったこと

セレクトボックス内に、ユーザーの登録済住所を選択肢として用意したかったのですが、どのような記載方法が適切なのか、全然分からなくて、けっこう長い時間グーグル検索して辿り着いたのが、collection_selectです。
image.png
このセレクトボックスをクリックすると、
image.png
というように、登録している住所一覧が出るようにしたかったです!!

使い方

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: "選択してください")

最後はオプションですが、これを付け足すことにより、選択してくださいの文言が一番上に表示されるようになります。

3
3
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
3
3