108
124

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.

【Rails】 form_with, form_for でプルダウン(セレクトボックス)を実装してみる

Last updated at Posted at 2019-11-14

概要

今回はrailsアプリケーションにおいてフォームを送信する際に、以下のような簡単なプルダウンを実装できるようにします。(何か質問等あったら気軽にコメントください!)

本記事はform_withを例としていますが、form_for内でも同様のコードで使用可能です。

スクリーンショット 2019-11-15 3.34.17.png

スクリーンショット 2019-11-15 3.35.25.png

上記の例は以下のようなコード1行で実装できます。("faculty"カラムに、選択肢内の学部のいずれかを選んで保存させるイメージです。また「hoge」は「ホニャララ」という意味で使っているので、こちらも適宜自分のプロダクトに合わせて変更してください。)

view/hoges/new.html.erb
  <%= form_with model: @hoge do |f| %>

     # 以下の一行がプルダウンを実装するためのコード(追記部分)
     <%= f.select :faculty, [["理工学部", "理工学部"], ["経済学部", "経済学部"], ["法学部", "法学部"], ["医学部", "医学部"]], include_blank: "選択して下さい" %>

     <%= f.submit '送信'%>
  <% end %>

一般形

コードを一般形に直すと以下のようになります。

view/hoges/new.html.erb
  <%= form_with model: @hoge do |f| %>

     # 以下の一行がプルダウンを実装するためのコード(追記部分)
     <%= f.select :保存先のカラム名, [["選択肢1", "実際にDBに保存させる内容"], ["選択肢2", "実際にDBに保存させる内容"]], include_blank: "選択して下さい" %>

     <%= f.submit '送信'%>
  <% end %>

「保存先のカラム名」には、プルダウンで選択した値を送信する際に保存したいカラムの名前を記述します。

もし送信ボタンを押しても値が保存されないという場合は、コントローラーのStrong Parametersの記述について確認してみてください。
params.require(:hoge).permit(:hoge, :hogehoge) のところ)

「選択肢」と「実際にDBに保存させる内容」は基本一緒にして大丈夫です。
(「実際にDBに保存させる内容」を変えれば、"経済学部"を選択して送信した際に保存される内容を例えばtrueや2などの整数にする、といったことができます。)

応用編

以下のように、プルダウンの選択肢をDB内のあるテーブルの特定のカラムの内容にすることもできます。

view/hoges/new.html.erb
  <%= form_with model: @hoge do |f| %>

     # 以下の一行がプルダウンを実装するためのコード(追記部分)
     <%= f.collection_select :保存先のカラム名, テーブル(モデル)名.all, :実際にDBに保存させるカラム名, :選択肢に用いるカラム名, include_blank: "選択して下さい" %>

     <%= f.submit '送信'%>
  <% end %>

参考記事

【開発メモ】Ruby on Railsのform_forでドロップダウンリストの選択ボックスを設置する方法

[Rails 4.x] FormのSelect プルダウンメニューの項目をDBから引っ張ってくる方法

108
124
1

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
108
124

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?