15
12

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.

options_from_collection_for_selectを理解する(プルダウンリストを簡単に作りたい)[Rails]

Last updated at Posted at 2020-06-20

とても長い名前のヘルパーメソッド

Railsガイドを読んでいて、options_from_collection_for_select という長い名前のヘルパーに出会いました。

以前、options_for_selectを使って、プルダウンリスト(以降、Railsガイドの表記に習いセレクトボックスと呼びます)を作った時に

▼こちらです
【初心者向け】form_with, haml, enumを使ってselectによるプルダウンリストを作った話[Rails]

調べはしたけれども、よくわからなくて放置していたのでした^^;
今はRailsガイドを読んでしっかりわかるようになったので、自分なりに噛み砕いたことを発信したいと思います。

まずは options_for_select で作ってみる

まず、上記の記事でも作成している、options_for_selectタグを使った、セレクトボックスの作り方のコードがこちら

= options_for_select([['London', 1], ['Tokyo', 2], ['Beijing', 3]])

ただ、上記のコードだといちいち配列を列挙しなくてはいけないのが面倒くさい。
そのため、配列をモデルから生成することもできる。

- array = City.all.map{ |city| [city.name, city.id] }
= options_for_select( array )

これでももちろんよいのだけど、二行になるのがちょっとダサい。
というわけで、もうコレクション(ここではモデル)から一気に選択肢をせいせいしてしまうのが、options_from_collection_for_select ヘルパーです

options_from_collection_for_select の使い方

= f.select :where_to_go, options_from_collection_for_select( City.all, :id, :name)

options_from_collection_for_select はセレクトタグの中のoption要素しか生成しないので、全体をselectタグで囲む必要があります。

必要な引数は以下の通りです。

options_from_collection_for_select( コレクション, [optionタグのvalueとなる値], [選択肢のテキスト])

そのほか、加えられるオプションや、classを加えるときはどうするの??という方はこちらをご参照下さい。

APIドキュメント
ruby on railsでselectのクラスが設定できない!

最近はいろいろな形のフォームを作っているので、また何かあれば記事にしたいと思います。

追記(エラーが出たときや編集画面で入力ずみの内容を引継ぎたい時)

↑上記の内容で実装をしていたのですが、上記だと、編集画面や、入力内容にエラーがあって元の画面に戻るときに、すでに入力ずみの内容を引き継げないという不具合がありました。
そのため、下記のような形で optionにデフォルト値を設定しました。

= f.select :where_to_go, options_from_collection_for_select( City.all, :id, :name, @city.id)
# @cityはその時、コントローラーからViewに渡っている変数。ここでは仮に@cityとしました
15
12
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
15
12

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?