【Rails/選択ボックス】selectを使って選択ボックスを作る方法

Not image

今回は、Railsアプリケーションを作っている方に向けて知識共有です。

題名のとおりなのですが、Railsで選択ボックスを作るときは、どうすればいいかということです。

それには、ビューヘルパーのselect・select_tagを使います。

コード自体は短いのですが、オプションの設定などがドキュメントだと情報不足な感じで、もやもやしたのでまとめます。

今回やりたいことNot image

  • 選択ボックスを実装したい(View)

実装詳細

  • Railsのビューヘルパーを使って実装する

環境

  • MacOS
  • Rails 5.0.7
  • sqlite3

手順

selectメソッド

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の構文

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の構文

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の構文

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メソッドで冗長性を排除

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です