使用simple_form_for开发表单：未提交时如何获取首个输入值

要实现第二个输入框选项随第一个输入框值动态变化，核心是前端实时获取第一个输入框的值，再通过AJAX请求后端拉取对应选项，无需提交整个表单。具体步骤如下：

1. 给输入框添加标识（便于JS操作） #

在simple_form_for中，通过input_html给两个输入框指定id，方便后续JavaScript定位：

<%= simple_form_for @your_model do |f| %>
  <%= f.input :first_field, input_html: { id: 'first-input' } %>
  <%= f.input :second_field, collection: [], input_html: { id: 'second-input' } %>
  <%= f.button :submit %>
<% end %>

注：如果第一个是下拉选择框，写法完全一致；如果是文本输入框，只需对应调整input类型即可。

2. 前端JS监听输入变化并获取值 #

通过JavaScript监听第一个输入框的input（文本框）或change（下拉框）事件，实时获取当前值，再请求后端更新第二个输入框的选项：

document.addEventListener('DOMContentLoaded', function() {
  const firstInput = document.getElementById('first-input');
  const secondInput = document.getElementById('second-input');

  // 根据输入框类型选择监听事件：文本框用input，下拉框用change
  firstInput.addEventListener('input', function() {
    const currentValue = this.value;
    // 若值为空，重置第二个输入框
    if (!currentValue) {
      secondInput.innerHTML = '<option value="">请先选择或输入第一个字段</option>';
      return;
    }

    // 发送AJAX请求到后端获取对应选项
    fetch(`/your_controller/get_options?selected=${currentValue}`)
      .then(res => res.json())
      .then(options => {
        // 清空现有选项并添加新选项
        secondInput.innerHTML = '';
        options.forEach(opt => {
          const optElement = document.createElement('option');
          optElement.value = opt.value;
          optElement.textContent = opt.label;
          secondInput.appendChild(optElement);
        });
      })
      .catch(err => console.log('加载选项出错:', err));
  });
});

3. 后端处理AJAX请求，返回选项数据 #

在对应控制器中添加动作，根据前端传递的第一个输入框的值，查询并返回格式化后的选项JSON：

class YourController < ApplicationController
  def get_options
    selected_val = params[:selected]
    # 根据业务逻辑查询对应选项，比如从数据库获取
    options = TargetModel.where(related_field: selected_val).pluck(:id, :display_name)
    # 转成前端需要的键值对格式
    formatted_options = options.map { |id, name| { value: id, label: name } }
    render json: formatted_options
  end
end

4. 添加对应路由 #

在config/routes.rb中配置AJAX请求的路由：

get '/your_controller/get_options', to: 'your_controller#get_options'

额外提示 #

• 下拉框建议用change事件，文本框用input事件实现实时响应；
• 后端要做好参数校验，防止非法请求或SQL注入；
• 可添加加载状态提示（比如在请求时禁用第二个输入框并显示"加载中"），优化用户体验。

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