読者です 読者をやめる 読者になる 読者になる

【Rails】ViewHelperのselectボックス生成方法について

Ruby on Rails
スポンサーリンク

View Helper を使用した select ボックスの生成方法です。

selectメソッド

select メソッドの基本構文は以下の通りです。

select(オブジェクト名, プロパティ名, タグの情報 [, 動作オプション [, タグオプション]])
動作オプション 概要
include_blank 常に空のオプションを先頭に追加する。
prompt プロパティに値が設定されていない時に指定したオプションを先頭に追加する。
disabled 文字列か配列で無効にしたい選択肢の value 値を指定する。
selected オブジェクトの値とは異なる値を選択させたい場合に指定する。
タグオプション 概要
class クラス名を指定する。
multiple 復数選択したい場合に指定する。ex) { multiple: true }
disabled select タグ自体を無効にします。ex) { disabled: true }

タグの情報には配列 or ハッシュを指定します。配列の場合インデックス0に表示名、インデックス1に value 値を、ハッシュの場合はキーに表示名、値に value 値を設定します。

  • 配列 - [["O'Reilly Japan, Inc.", "1"], ["Gihyo inc.", "2"]]
  • ハッシュ - {"O'Reilly Japan, Inc.": "1", "Gihyo inc.": "2"}

以下のようにDBから取得したオブジェクトを配列に加工して使用することも可能です。prompt オプションを使用していますが「選択してください」のままフォームを送信するとbook[publisher_id]は空で送信されます。

= select :book, :publisher_id, Publisher.pluck(:name, :id), { prompt: '選択してください' }, { class: 'pub' }
<select class="pub" name="book[publisher_id]" id="book_publisher_id">
  <option value="">選択してください</option>
  <option value="1">O'Reilly Japan, Inc.</option>
  <option value="2">Gihyo inc.</option>
</select>

動作オプションを省略してタグオプションのみ指定したい場合、次のように書いてしまうと指定したclass="pub"を認識してくれません。

= select :book, :publisher_id, Publisher.pluck(:name, :id), { class: 'pub' }

この場合は動作オプションに空のハッシュを渡してやる必要があります。

= select :book, :publisher_id, Publisher.pluck(:name, :id), {}, { class: 'pub' }

form_forブロック配下の場合

オブジェクト名の:bookは省略します。

= form_for(@book) do |f|
  = f.select :publisher_id, Publisher.pluck(:name, :id), { prompt: '選択してください' }, { class: 'pub' }

 select - リファレンス - Railsドキュメント
 rails/select.rb at master · rails/rails · GitHub

collection_selectメソッド

collection_select メソッドの基本構文は以下の通りです。

collection_select(オブジェクト名, プロパティ名, オブジェクトの配列, value属性の項目, textの項目 [, 動作オプション [, タグオプション]])

select メソッドにおいてDBから取得したオブジェクトを配列に加工して使用しましたが、その場合collection_selectメソッドを使えば余計な加工をする必要がありません。動作オプションとタグオプションについては同じなので説明は省略します。

= collection_select :book, :publisher_id, Publisher.all, :id, :name, { prompt: '選択してください' }, { class: 'pub' }

form_forブロック配下の場合

オブジェクト名の:bookは省略します。

= form_for(@book) do |f|
  = f.collection_select :publisher_id, Publisher.all, :id, :name, { prompt: '選択してください' }, { class: 'pub' }

 collection_select - リファレンス - - Railsドキュメント
 rails/collection_select.rb at master · rails/rails · GitHub

select_tagメソッド

select_tag メソッドの基本構文は以下の通りです。

select_tag(要素名, タグを表す文字列 [, オプション])

select タグと違い引数にはタグを表す文字列、すなわち option タグをそのまま文字列として指定する必要があります。 しかしHTMLをそのまま記述するのは冗長なのでoptions_for_selectまたはoptions_from_collection_for_selectを使用するのが一般的です。

= select_tag :publisher_id, options_from_collection_for_select(Publisher.all, :id, :name)
<select name="publisher_id" id="publisher_id">
  <option value="1">O'Reilly Japan, Inc.</option>
  <option value="2">Gihyo inc.</option>
</select>

options_for_select

options_for_select メソッドの基本構文は以下の通りです。

options_for_select(タグの配列 or ハッシュ [, selected / disabled])

引数には select メソッドと同様にタグの配列かハッシュを指定してください。select メソッドの内部では options_for_select が使用されているため同じ挙動になります。 オプションは selected と disabled のみです。数値のみを指定した場合は selected に、disabled も設定したい場合はハッシュで指定します{ selected: 2, disabled: [3, 6, 7] }

irb(main):001:0> helper.options_for_select(Publisher.pluck(:name, :id), { selected: 1, disabled: 2 })
   (0.2ms)  SELECT "publishers"."name", "publishers"."id" FROM "publishers"
=> "<option selected=\"selected\" value=\"1\">O&#39;Reilly Japan, Inc.</option>\n<option disabled=\"disabled\" value=\"2\">Gihyo inc.</option>"

 options_for_select - リファレンス - Railsドキュメント

options_from_collection_for_select

options_from_collection_for_select メソッドの基本構文は以下の通りです。

options_from_collection_for_select(オブジェクトの配列, value属性の項目, textの項目 [, selected / disabled])

引数には collection_select メソッドと同様にオブジェクトの配列を指定します。collection_select メソッドの内部では options_from_collection_for_select が使用されているため同じ挙動になります。オプションは options_for_select と同様です。

irb(main):002:0> helper.options_from_collection_for_select(Publisher.all, :id, :name, 2)
  Publisher Load (0.2ms)  SELECT "publishers".* FROM "publishers"
=> "<option value=\"1\">O&#39;Reilly Japan, Inc.</option>\n<option selected=\"selected\" value=\"2\">Gihyo inc.</option>"

 options_from_collection_for_select - リファレンス - Railsドキュメント

 rails/form_tag_helper.rb at master · rails/rails · GitHub
 rails/form_options_helper.rb at master · rails/rails · GitHub