Ruby on Rails新手求助：在form_for中创建关联Users模型的下拉列表

作为Rails新手，你要实现的功能其实分两步：生成关联用户的下拉选框，以及用JavaScript监听选择事件自动填充邮箱。我一步步给你拆解：

1. 准备工作：控制器传用户数据 + 模型关联 #

首先，在你渲染表单的控制器action（比如FemailsController#new）里，把所有用户数据传给视图：

# app/controllers/femails_controller.rb
def new
  @users = User.all # 拿到所有用户，供下拉选框使用
end

另外，确保你的Femail模型和User模型建立关联（如果还没做的话）：

# app/models/femail.rb
class Femail < ApplicationRecord
  belongs_to :user, optional: true # optional: true允许不选用户提交表单
end

还要记得给femails表加user_id字段，执行迁移：

rails generate migration AddUserIdToFemails user_id:integer
rails db:migrate

2. 在表单中添加用户下拉选框 #

修改你的form_for代码，添加collection_select来生成用户下拉列表。这里有两种常见写法，根据你的需求选：

写法1：下拉直接显示用户邮箱（简单直接） #

<%= form_for :femail, url: {action: "create"} do |form| %>
  <p>
    <%= form.label :from %><br>
    <%= form.text_field :from %>
  </p>

  <!-- 新增用户下拉选框 -->
  <p>
    <%= form.label :user_id, "选择收件人" %><br>
    <%= form.collection_select :user_id, @users, :id, :email, prompt: "请选择用户" %>
  </p>

  <p>
    <%= form.label :to %><br>
    <%= form.text_field :to %>
  </p>

  <p><%= form.submit "发送" %></p>
<% end %>

• collection_select参数说明：字段名(:user_id)、数据源(@users)、选项对应的值(:id)、选项显示的文本(:email)

写法2：下拉显示用户名，隐藏存邮箱（更友好） #

如果想让下拉显示用户名，而不是邮箱，可以把邮箱存在选项的data属性里，后续JS读取：

<p>
  <%= form.label :user_id, "选择收件人" %><br>
  <%= form.collection_select :user_id, @users, :id, :name, 
                              prompt: "请选择用户",
                              data: { email_map: @users.pluck(:id, :email).to_h.to_json } %>
</p>

3. 用JavaScript实现自动填充邮箱 #

在表单后面添加JS代码，监听下拉选框的变化事件，把选中的邮箱填充到:to字段：

对应写法1的JS（直接读选项文本） #

<script>
  // 获取下拉选框和收件人输入框
  const userSelect = document.querySelector('select[name="femail[user_id]"]');
  const toEmailField = document.querySelector('input[name="femail[to]"]');

  // 监听选择变化
  userSelect.addEventListener('change', function() {
    const selectedText = this.options[this.selectedIndex].text;
    // 如果不是默认提示选项，就填充邮箱
    toEmailField.value = selectedText !== "请选择用户" ? selectedText : "";
  });
</script>

对应写法2的JS（从data属性读邮箱） #

<script>
  const userSelect = document.querySelector('select[name="femail[user_id]"]');
  const toEmailField = document.querySelector('input[name="femail[to]"]');
  // 解析预存的id->邮箱映射
  const emailMap = JSON.parse(userSelect.dataset.emailMap);

  userSelect.addEventListener('change', function() {
    const userId = this.value;
    // 根据选中的用户id获取邮箱
    toEmailField.value = userId ? emailMap[userId] : "";
  });
</script>

4. 控制器参数允许user_id #

最后，在FemailsController的强参数里加上:user_id，确保能正常接收：

def femail_params
  params.require(:femail).permit(:from, :to, :user_id)
end

这样就完成啦！选完用户后，收件人邮箱会自动填充，不用手动输入～

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