107
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

posted at

updated at

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

概要

今回は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から引っ張ってくる方法

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Sign upLogin
107
Help us understand the problem. What are the problem?