如何用Ruby on Rails和Simple Form gem实现表单字段集合动态切换？

要实现前端实时切换下拉选项的效果，需要结合后端API提供动态数据和前端JavaScript监听选择事件来完成，具体步骤如下：

1. 后端添加动态数据接口 #

首先在控制器中新增一个接口，用于根据用户选择的ubicacion返回对应的localizacion选项：

# app/controllers/properties_controller.rb
def get_localizaciones
  ubicacion = params[:ubicacion]
  localizaciones = case ubicacion
                   when 'Panama'
                     ['Costa del Este']
                   when 'Playas'
                     ['Corronado']
                   else
                     ['']
                   end
  render json: localizaciones
end

然后在路由文件中添加该接口的路由：

# config/routes.rb
get 'properties/get_localizaciones', to: 'properties#get_localizaciones'

2. 重构表单代码 #

将原有的服务器端条件渲染改为通用的下拉字段，给两个下拉框添加唯一ID，方便前端定位：

<div class="col-md-4">
  <%= f.input :ubicacion, collection: ['Panama', 'Playas'], input_html: { id: 'ubicacion-select' } %>
</div>

<div class="col-md-4">
  <%= f.input :localizacion, collection: [], input_html: { id: 'localizacion-select' } %>
</div>

3. 前端添加联动逻辑 #

通过JavaScript监听ubicacion下拉框的变化事件，调用后端接口获取选项并更新localizacion下拉框：

// 可放置在app/javascript/packs/properties.js或视图的<script>标签中
document.addEventListener('DOMContentLoaded', function() {
  const ubicacionSelect = document.getElementById('ubicacion-select');
  const localizacionSelect = document.getElementById('localizacion-select');

  // 页面加载时如果已有默认值，自动触发一次更新
  if (ubicacionSelect.value) {
    updateLocalizaciones(ubicacionSelect.value);
  }

  // 监听选择变化事件
  ubicacionSelect.addEventListener('change', function() {
    updateLocalizaciones(this.value);
  });

  // 更新下拉选项的核心函数
  function updateLocalizaciones(ubicacion) {
    fetch(`/properties/get_localizaciones?ubicacion=${encodeURIComponent(ubicacion)}`)
      .then(response => response.json())
      .then(data => {
        // 清空现有选项
        localizacionSelect.innerHTML = '';
        // 添加新选项
        data.forEach(item => {
          const option = document.createElement('option');
          option.value = item;
          option.textContent = item;
          localizacionSelect.appendChild(option);
        });
      })
      .catch(error => console.error('获取选项失败:', error));
  }
});

扩展说明 #

如果你的选项是从数据库关联模型中获取（比如Ubicacion模型关联Localizacion模型），可以将后端的选项逻辑改为数据库查询：

# 替换controllers中的localizaciones赋值逻辑
localizaciones = Ubicacion.find_by(name: ubicacion)&.localizaciones&.pluck(:name) || ['']

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