67
83

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

【Ruby】f.collection_select を使ってみた

Last updated at Posted at 2020-04-28

フォームを作っている中で選択肢を持たせた見え方にしたく調べたので、残しておきます。

# f.collection_selectとは
よく見るこういうセレクトボックスが作れます!
https://gyazo.com/376813aa3d81a93cf8ba338e0e2285f2
## ドキュメントを読む

初めて使うのでまずはrailsドキュメントを読んでみました。
https://railsdoc.com/page/collection_select

説明

選択ボックスをモデルの情報を元に生成

使い方

collection_select(オブジェクト名, メソッド名, 要素の配列, value属性の項目, テキストの項目 [, オプション or HTML属性 or イベント属性])
f.object
f.collection_select(メソッド名, オブジェクトの配列, value属性の項目, テキストの項目 [, オプション or HTML属性 or イベント属性])

??どういうこと

つまりモデルから引っ張ってきた選択肢から選んでDBに送ろうよということ

##具体例

ruby.rb
f.collection_select(:name, @categories, :id, :name)

↓上記の結果

<select id="page_name" name="page[name]"><option value="1">Railsの基礎知識</option>
<option value="2">Rubyの基礎知識</option>
</select>

第一引数

メソッド名 :name
この情報をもとに、selectタグのid属性、name属性を決める。
↓の〇〇部分が決まる

<select name="○○" id="◯◯">

第二引数

オブジェクトの配列 @categories
その選択肢はどの配列がもとになるの?ということ
前提としては

@categories = Post.all

のように定義されているモデルから配列を取り出してある状態

第三引数

:id value属性の項目
ここにvalueが入る、つまり選択された場合ここの値がDBに送られる。今回は:idなのでidが送られる。
↓の◯◯に入る

<option value="◯◯">選択肢</option>

第四引数

:name
選択肢に実際に表示するのはこれということを指定している。項目は、optionタグ内のテキストに設定したい値のカラム名が入る。nameカラムを選択肢として表示したいので:nameと設定する。
↓の選択肢に:nameが入る

<option value="1">選択肢</option>

第五引数

これはオプションですが
prompt: "選択してください"
で初期設定でこれが表示されるようになります(オススメ)

##補足
選択肢を別のモデルから引っ張ってきたい場合

ruby.rb
f.collection_select(:name, @categories, :id, :name)

ここの@categoriesを モデル名.all とかにしてあげるとそこから選択肢を引っ張ってこれる
モデル名はクラスメソッドなのでどこからでも呼び出せる

具体例(自分が作ったコードの場合)

ruby.rb
f.collection_select :name, MenuSelect.all, :menu_name, :menu_name, prompt: "何をしましたか?", class: 'form-control'

##クラスが付けられない
※クラス名の付け方

.rb
= f.collection_select :postage_player_id, PostagePlayer.all, :id, :name,{prompt: "選択してください"}, {class: "new-wrapper__main__input-select"}

,{prompt: "選択してください"}, {class: "new-wrapper__main__input-select"}こんな感じでpromptとclassを引数として渡してあげるとクラスが設定できます。

参考文献

67
83
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
67
83

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?