Rails表单实现客户选择联动展示对应办公点

要实现选择客户后自动过滤对应办公点的效果，需要结合后端接口和前端JavaScript完成，具体步骤如下：

1. 修改表单代码，添加标识ID #

给两个下拉框加上ID，方便后续JS操作：

<%= form.select :client_id, collection: Client.all.map { |r| [r.name, r.id] }, id: 'client-select' %>
<%= form.select :office_id, collection: [], id: 'office-select', prompt: '请先选择客户' %>

办公点下拉框初始设为空，提示用户先选择客户。

2. 添加后端路由与控制器动作 #

在config/routes.rb中添加路由，用于返回指定客户的办公点数据：

get '/offices/by_client', to: 'offices#by_client'

在OfficesController中实现对应动作：

def by_client
  client = Client.find(params[:client_id])
  offices = client.offices.map { |o| [o.name, o.id] }
  render json: offices
end

该动作根据传入的client_id获取对应客户的办公点，返回名称与ID的JSON格式数据。

3. 编写前端联动逻辑 #

在页面的JavaScript部分（可放在视图末尾或独立JS文件）添加监听事件：

document.addEventListener('DOMContentLoaded', function() {
  const clientSelect = document.getElementById('client-select');
  const officeSelect = document.getElementById('office-select');

  clientSelect.addEventListener('change', function() {
    const clientId = this.value;
    officeSelect.innerHTML = '<option value="">加载中...</option>';

    if (clientId) {
      fetch(`/offices/by_client?client_id=${clientId}`)
        .then(response => response.json())
        .then(offices => {
          officeSelect.innerHTML = '<option value="">请选择办公点</option>';
          offices.forEach(office => {
            const option = document.createElement('option');
            option.value = office[1];
            option.textContent = office[0];
            officeSelect.appendChild(option);
          });
        })
        .catch(error => {
          officeSelect.innerHTML = '<option value="">加载失败，请重试</option>';
          console.error('获取办公点失败:', error);
        });
    } else {
      officeSelect.innerHTML = '<option value="">请先选择客户</option>';
    }
  });
});

这段代码会在页面加载完成后监听客户下拉框的变化：

• 选中客户时，发送请求获取对应办公点列表并渲染为下拉选项
• 未选中客户时，重置办公点下拉框的提示内容

4. 可选：编辑页面默认值处理 #

如果是报表编辑页面，需要默认选中已有客户和办公点，可修改表单并补充JS逻辑：

<%= form.select :client_id, collection: Client.all.map { |r| [r.name, r.id] }, id: 'client-select', selected: @report.client_id %>
<%= form.select :office_id, collection: @report.client&.offices.map { |r| [r.name, r.id] } || [], id: 'office-select', selected: @report.office_id %>

在JS中添加初始化触发逻辑：

// 页面加载完成后，若已有选中客户则触发一次change事件
if (clientSelect.value) {
  clientSelect.dispatchEvent(new Event('change'));
}

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