用例1：如果表单应在服务器端提交，则下拉列表更改后：

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

<%= form_with url: "your URL goes here", class: 'test_submit_form' do |form| %>
  <%= form.label :type %>
  <%= form.select :type, options_for_select(options, @selected_type), name: 'type' %>

  <% if @selected_type == 'foo' %>
    <div>
      <%= form.hidden_field :type, value:'foo' %>
    </div>
  <% elsif @selected_type == 'bar' %>
    <div>
      <%= form.hidden_field :type, value:'bar' %>
    </div>
  <% elsif @selected_type == 'baz' %>
    <div>
      <%= form.hidden_field :type, value:'baz' %>
    </div>
  <% end %>

  <%= form.submit %>
<% end %>

Javascript：

<script>
  $('#type').on('change', function(){
    $('form.test_submit_form').submit();
  });
</script>

用例2：如果您只需要在客户端显示/隐藏DIV，则在下拉菜单更改后：

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

<%= form_with url: "your URL goes here", class: 'test_submit_form' do |form| %>
  <%= form.label :type %>
  <%= form.select :type, options_for_select(options, @selected_type), name: 'type' %>
  
  <div class="option-container foo" style="display: <%= @selected_type == 'foo' ? 'block' : 'none'%>">
    <%= form.hidden_field :type, value:'foo' %>
  </div>

  <div class="option-container bar" style="display: <%= @selected_type == 'bar' ? 'block' : 'none'%>">
    <%= form.hidden_field :type, value:'bar' %>
  </div>

  <div class="option-container baz" style="display: <%= @selected_type == 'baz' ? 'block' : 'none'%>">
    <%= form.hidden_field :type, value:'baz' %>
  </div>

  <%= form.submit %>
<% end %>

Javascript：

<script>
  $('#type').on('change', function(){
    $('.option-container').hide();
    $('.option-container.' + $(this).val()).show();
  });
</script>

请注意，div上的option-container和选项（foo、bar、baz）类以及控制器代码在两种情况下将保持不变：

@selected_type = params[:type]