📝

Railsでcollection_select, selectを使ってセレクトボックスを作る

2022/01/22に公開

Rails

tech

作れるもの。

collection_select

選択ボックスをモデルの情報を元に生成する
以下の例ではBookモデルの各レコードのtitleカラムの値でセレクトボックスを作成可能

= form_with model: @books, method: :get, url: books_path do |f|
  = f.collection_select :book_id, Book.all, :id, :title, options = { include_blank: true, selected: <idの値を動的に指定する> }

各引数とその意味

引数	意味
第一	`book_id` メソッド名
第二	`Book.all` Bookモデルのレコード全てを選択肢の情報として提供する
第三	`id` Bookモデルのカラムであるidをフォームのvalueとして設定する
第四	`name` Bookモデルのカラムであるtitleをセレクトボックスの選択肢の表示に使用する
第五	`options` include_black: trueで空欄を許容し、selected: <idの値>でどの要素が選択されているかを動的に指定が可能

select

options_for_selectオプションを第二引数で使用することで選択肢を自分で決めてセレクトボックスを生成できる

= form_with model: @books, method: :get, url: books_path do |f|
  = f.select :framwork_id, options_for_select([["Ruby on Rails", 1], ["Express", 2], ["React", 3]], <指定する値>), options = { include_blank: true }

各引数とその意味

f.selectに対する表

引数	意味
第一	メソッド名
第二	指定したい選択肢をoptions_for_selectを使用して用意する
第三	オプション(include_black: trueで空欄を許容する)

options_for_selectに対する表

引数	意味
第一	配列やハッシュなど選択肢として表示したい要素の情報
第二	どの要素が選択されているかを動的に指定が可能

まとめ

セレクトボックスを作成するときに、モデルの情報を元に選択肢を作成したいときはcollection_selectを使用し、モデルとは関係ない選択肢を自作するときはselectを使う

collection_select

各引数とその意味

select

各引数とその意味

まとめ

Discussion