【Rails】セレクトボックスで選択してページの表示内容を変えたい
railsのf.selectで選択したらページの内容が切り替わる方法を考えてみました。一つのやり方はJavaScriptを書くことなのですが,ここではJavaScript無しでいきます。コードの動作確認はしていないので,概要だけ。
解決策:前処理を入れる
やりたいことは,localhost:3000/home/0/pet
でdogのコンテンツ,localhost:3000/home/1/pet
でcatのコンテンツ,localhost:3000/home/2/pet
でbirdのコンテンツを表示させることです。これを同ページ内のf.select
で選べるようにします。
get "home/before_pet", to: "home#before_pet", as: "before_pet"
get "home/:id/pet", to: "home#pet", as: "pet"
<%= form_with url: before_pet_path, mathod: :get, local: true do |f| %>
<%= f.select :pet, ["dog": 0, "cat": 1, "bird": 2] %>
<%= f.submit "選択" %>
<% end %>
<% if params[:id] == 0 %>
<p>dogのコンテンツ</p>
<% elsif params[:id] == 1 %>
<p>catのコンテンツ</p>
<% elsif params[:id] == 2 %>
<p>birdのコンテンツ</p>
<% end %>
form_with
でフォームを設置します。今回のポイントはセレクトボックスが設置されているページ自体の内容を切り替えることです。
ページのアドレスはhome/:id/pet
という形で定義されていますが,セレクトボックスの値を:idを指定するパラメータとして直接送ることはできません。そこでいったんbefore_pet
というアクションを定義して,フォームで入力されたパラメータを送ります。
class HomeController < ApplicationController
def before_pet
redirect_to pet_path(id: params[:pet])
end
def pet
end
end
アクションbefore_pet
はフォームの値をいったん受け取ってもとのページにリダイレクトします。
あとはifなどで分岐すればページの内容を切り替えることができます。
SNSでシェア