Rails表单中实现下拉选择切换显示不同div的问题排查

你的核心问题是下拉选择后没有触发页面更新/表单提交，导致服务器无法获取选中的type，对应div自然不会显示。下面给出两种常用解决方案，以及原代码的问题点：

原代码问题梳理 #

1. 下拉选择后无提交行为：用户选完选项后，页面没有刷新或发起请求，params[:type]始终为空，@selected_type是nil，所以所有div都不显示
2. 冗余的hidden_field：form.select已经会提交type参数，不需要重复添加隐藏字段
3. name: 'type'参数错误：Rails表单助手默认会生成规范的参数名（比如vendor_item[type]），手动设置name:'type'会破坏参数结构，导致控制器无法通过params[:type]获取值（正确应该是params[:vendor_item][:type]）

方案1：无刷新前端控制（推荐，体验更好） #

不需要提交表单，用JS监听下拉变化，直接在前端切换div的显隐：

视图代码（erb） #

<% options = [['Foo', 'foo'], ['Bar', 'bar'], ['Baz', 'baz']] %>

<%= form_with(model: @vendor_item) do |form| %>
  <%= form.label :type %>
  <% # 给select加ID，方便JS获取 %>
  <%= form.select :type, options_for_select(options, @selected_type), {}, { id: 'type-select' } %>

  <% # 每个div标记对应type，初始根据@selected_type控制显隐 %>
  <div class="type-section" data-type="foo" style="display: <%= @selected_type == 'foo' ? 'block' : 'none' %>">
    <h4>Foo专属内容</h4>
    <%= form.text_field :foo_specific_field %>
  </div>

  <div class="type-section" data-type="bar" style="display: <%= @selected_type == 'bar' ? 'block' : 'none' %>">
    <h4>Bar专属内容</h4>
    <%= form.text_field :bar_specific_field %>
  </div>

  <div class="type-section" data-type="baz" style="display: <%= @selected_type == 'baz' ? 'block' : 'none' %>">
    <h4>Baz专属内容</h4>
    <%= form.text_field :baz_specific_field %>
  </div>

  <%= form.submit "提交" %>
<% end %>

前端JS代码（可放在视图底部或app/javascript目录） #

// 页面加载完成后绑定事件
document.addEventListener('DOMContentLoaded', () => {
  const typeSelect = document.getElementById('type-select');
  const typeSections = document.querySelectorAll('.type-section');

  // 监听下拉选择变化
  typeSelect.addEventListener('change', () => {
    const selected = typeSelect.value;
    // 隐藏所有区块
    typeSections.forEach(section => section.style.display = 'none');
    // 显示选中的区块
    const targetSection = document.querySelector(`.type-section[data-type="${selected}"]`);
    if (targetSection) targetSection.style.display = 'block';
  });
});

控制器代码 #

def new
  @vendor_item = VendorItem.new
  # 设置默认选中值，避免页面加载时无内容显示
  @selected_type = params.dig(:vendor_item, :type) || 'foo'
end

方案2：选择后自动提交表单（刷新页面） #

通过下拉的onchange事件触发表单提交，让服务器返回对应显示的div：

视图代码（erb） #

<% options = [['Foo', 'foo'], ['Bar', 'bar'], ['Baz', 'baz']] %>

<% # 用method: :get，让参数直接出现在URL里，方便刷新 %>
<%= form_with(model: @vendor_item, method: :get) do |form| %>
  <%= form.label :type %>
  <% # 选择后自动提交表单 %>
  <%= form.select :type, options_for_select(options, @selected_type), {}, { onchange: "this.form.submit()" } %>

  <% if @selected_type == 'foo' %>
    <div>
      <h4>Foo专属内容</h4>
      <%= form.text_field :foo_specific_field %>
    </div>
  <% elsif @selected_type == 'bar' %>
    <div>
      <h4>Bar专属内容</h4>
      <%= form.text_field :bar_specific_field %>
    </div>
  <% elsif @selected_type == 'baz' %>
    <div>
      <h4>Baz专属内容</h4>
      <%= form.text_field :baz_specific_field %>
    </div>
  <% end %>

  <%= form.submit "提交" %>
<% end %>

控制器代码 #

def new
  @vendor_item = VendorItem.new
  # 因为用了method: :get，直接从params[:type]获取值
  @selected_type = params[:type] || 'foo'
end

内容的提问来源于stack exchange，提问作者MeritonAliu