【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などで分岐すればページの内容を切り替えることができます。