Rails表单中通过JavaScript实现form.select下拉选项基于另一选中值联动

第一步：修改ERB模板，保留单个output字段 #

<%= form_with(model: my_model) do |form| %>
  <div class="form-floating" id="input">
    <%= form.select :input, ['a', 'b'], { }, class: "form-control" %>
    <%= form.label :input %>
  </div>

  <!-- 合并为单个output字段容器 -->
  <div class="form-floating" id="output-container">
    <%# 默认先加载a对应的选项，也可以留空后续动态渲染 %>
    <%= form.select :output, ['c', 'd'], { }, class: "form-control", id: "output-select" %>
    <%= form.label :output %>
  </div>

  <%= form.submit class: "btn" %>
<% end %>

第二步：修改JS逻辑动态替换选项 #

可将以下代码放入页面script标签，或项目的全局JS文件中：

// 预先定义input值和output选项的映射关系
const outputOptionMap = {
  'a': ['c', 'd'],
  'b': ['e', 'f']
}

function onChangeOutputOptions() {
  const selectedInput = $('#input select').val()
  const $outputSelect = $('#output-select')
  // 清空原有选项
  $outputSelect.empty()
  // 插入新选项
  outputOptionMap[selectedInput].forEach(optionValue => {
    $outputSelect.append(`<option value="${optionValue}">${optionValue}</option>`)
  })
}

// 绑定下拉框变更事件
$(document).on('change', '#input select', onChangeOutputOptions)
// 兼容Turbolinks/Turbo页面加载逻辑，页面打开时自动初始化选项
$(document).on('turbo:load turbolinks:load', onChangeOutputOptions)

可选替代方案（后端动态选项场景） #

如果output的选项是需要从数据库查询的动态数据，无需硬编码在前端，可按如下逻辑实现：

• 新增后端接口，接收input的选中值，返回对应output的选项JSON数组
• onChange事件触发时，携带选中的input值异步请求该接口，拿到返回结果后再渲染到select字段即可

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