今回は、Railsアプリケーションを作っている方に向けて知識共有です。
題名のとおりなのですが、Railsで選択ボックスを作るときは、どうすればいいかということです。
それには、ビューヘルパーのselect・select_tagを使います。
コード自体は短いのですが、オプションの設定などがドキュメントだと情報不足な感じで、もやもやしたのでまとめます。
今回やりたいこと
- 選択ボックスを実装したい(View)
実装詳細
- Railsのビューヘルパーを使って実装する
環境
- MacOS
- Rails 5.0.7
- sqlite3
手順
selectメソッド
selectはモデルオブジェクトがある場合に使うのが一般的なメソッド
select(オブジェクト, プロパティ名, 要素情報, オプション, 要素属性)
- 第1引数:オブジェクトはform_forのときは必要なし
- 第2引数:プロパティ名とは、モデルのカラム名
- 第3引数:要素情報は、選択ボックスに表示したい文字や数字などの情報
- 第4引数:オプションは、selectメソッドをどのような動きにさせるかなど
- 第5引数:要素属性などは、classなどの要素の設定ができる
実装例1
<%= f.select :name, ['sample1', 'sample2', 'sample3'], {include_blank: '選択ボックス'}, class: 'sample' %>
基本に忠実に実装。今回はform_forの中でやっていると想定して、オブジェクト名はなし。
一番最初の、:nameプロパティはテーブルのnameカラムの値(今回はサンプルにnameカラムというものを想定)。
実装例2
<%= f.select :name, [['sample1', 1], ['sample2', 2], ['sample3', 3]] %> <%= f.select :name, {sample1: 1, sample2: 2, sample3: 3} %>
第3引数に、配列とハッシュを使ったパターン。このような形の場合、パラメータとして送られる値は1や2のようなvalueの方。
<%= f.select :name, Human.all.map { |human| [human.name, human.id] } %>
このようにView側で、配列を作ってデータベースの特定のレコードを選択ボックス化することもできる。
select_tagメソッド
モデルと関連のない選択ボックスを生成
select_tag(要素の名前属性, 文字列群, オプション)
- 第1引数:htmlのname属性に入る
- 第2引数:選択肢にしたい文字列群(htmlタグ付きの文字列で指定する。例:「”<option value=”1″></option>”」みたいな感じ)
- 第3引数:include_blankのような、select_tagの動きを設定する
第2引数を文字列で指定すると冗長になって、間違いも起きやすくなるので、以下のメソッドをそれぞれ使う。
- options_for_select
- options_from_collection_for_select
options_for_select(配列/ハッシュ, オプション)
- 第1引数:選択肢にしたいものの配列/ハッシュ形式
- 第2引数:デフォルト値を設定できるなど
<%= select_tag 'name', options_for_select({sample1: 1, sample2: 2, sample3: 3}, 1), include_blank: true %>
上の場合ハッシュ部分が、選択ボックスになり1がデフォルト値になり、ボックス内のデフォルト値は「空」。
options_from_collection_for_select(オブジェクトの配列, value属性, text項目 , オプション])
- 第1引数:選択ボックスにする対象のオブジェクト
- 第1引数:htmlのvalue促成に設定される。パラメータで送られる値。
- 第1引数:ブラウザの画面に表示される値。実際に目に見える。
- 第1引数:デフォルト値などを設定できるなどのオプション
<%= select_tag 'name', options_from_collection_for_select(@human, :id, :name , 1) %>
ポイント・キーワード
- モデルに関連する場合は、selectメソッドで選択ボックスを作る
- モデルに関連しない場合は、select_tagメソッドで選択ボックスを作る
- options_for_select/options_from_collection_for_selectメソッドで冗長性を排除
コメントを残す