Rails嵌套表单动态选择：JS如何获取下拉选值传给控制器返回另一下拉列表

首先，咱们先把你现有代码里的小问题修正，再补全控制器和视图部分，就能实现下拉框的动态联动啦。

第一步：修正JavaScript代码 #

你的JS逻辑框架没问题，但有几个细节得调整：

• 回调函数的参数别和外部的selectedText重名，不然会覆盖变量
• 拿到后端返回的HTML后，要把它插入到目标下拉框的位置，而不是只return

修改后的salmonellas.js：

$(function () {
  $('body').on('change', "#mode_change", function () {
    var selectedValue = $(this).val(); // 优先用value（ID）传递，比文本更稳定

    // 避免选中空选项时发起无效请求
    if (selectedValue) {
      $.get('/salmonellas/find_stages', { mode_id: selectedValue }, function(data) {
        // 假设第二个下拉框的ID是stage_change，把返回的选项插入进去
        $('#stage_change').html(data);
      });
    } else {
      // 选中空选项时清空第二个下拉框
      $('#stage_change').html('<option value="">请先选择模式</option>');
    }
  });
});

第二步：配置路由 #

在config/routes.rb里添加对应GET路由：

resources :salmonellas do
  get 'find_stages', on: :collection
end

这样会生成/salmonellas/find_stages的合法路径，和JS里的请求地址对应。

第三步：实现控制器动作 #

在app/controllers/salmonellas_controller.rb里添加find_stages方法：

def find_stages
  # 假设Mode模型和Stage模型是has_many关联（Mode has_many :stages）
  mode = Mode.find_by(id: params[:mode_id])
  @stages = mode ? mode.stages : []

  # 只渲染下拉选项的局部视图，不加载整个页面布局
  render partial: 'stages_options', layout: false
end

用find_by替代find是为了避免找不到记录时抛出异常，更健壮。

第四步：创建生成下拉选项的局部视图 #

在app/views/salmonellas/目录下新建_stages_options.html.erb：

<option value="">请选择阶段</option>
<% @stages.each do |stage| %>
  <option value="<%= stage.id %>"><%= stage.name %></option>
<% end %>

这个局部视图会根据控制器传递的@stages生成对应的<option>标签，直接返回给前端。

额外优化小建议 #

• 永远优先用下拉框的value（一般是模型ID）传递参数，比文本更可靠——文本可能有空格、特殊字符，后期修改文本内容也不会影响逻辑
• 可以加个加载状态，比如发起请求时给第二个下拉框加个加载动画，提升用户体验
• 如果是嵌套表单（比如用fields_for的场景），要注意下拉框的ID可能带索引，比如salmonella[stages_attributes][0][stage_id]，这时候JS里可以用属性选择器或者动态拼接ID

这样一套流程下来，当第一个下拉框#mode_change选中值变化时，JS会发起AJAX请求到控制器，控制器查询对应的阶段列表，返回选项HTML，最后JS把HTML插入到第二个下拉框，就实现了动态联动效果。

内容的提问来源于stack exchange，提问作者E. D. B.