Rails中如何使用另一模型数据实现带复选框的select下拉关联产品分类

1. 完善多对多关联配置 #

你当前写的has_many :categories默认是一对多逻辑，也就是一个分类只能属于一个产品，不符合通用分类的业务场景，需要先配置多对多关联：

• 生成中间表迁移文件，执行命令：
  rails generate migration CreateProductCategories product:references category:references
  执行迁移：rails db:migrate
• 调整模型关联代码：

  # app/models/product.rb
  class Product < ApplicationRecord
    has_many :product_categories, dependent: :destroy
    has_many :categories, through: :product_categories
  end
  
  # app/models/category.rb
  class Category < ApplicationRecord
    has_many :product_categories, dependent: :destroy
    has_many :products, through: :product_categories
  end
  

2. 调整控制器配置 #

• 将@categories = Category.all移动到new和edit动作中，因为新建、编辑表单渲染时就需要加载分类数据，提交失败重新渲染时也需要重新加载：

  # app/controllers/products_controller.rb
  class ProductsController < ApplicationController
    def new
      @product = Product.new
      @categories = Category.all
    end
  
    def edit
      @product = Product.find(params[:id])
      @categories = Category.all
    end
  
    def create
      @product = Product.new(product_params)
      if @product.save
        redirect_to @product, notice: '产品创建成功'
      else
        @categories = Category.all
        render :new
      end
    end
  
    # 其他动作省略
  
    private
    # 强参数中添加允许接收的分类ID数组
    def product_params
      params.require(:product).permit(:name, :price, *其他产品字段, category_ids: [])
    end
  end
  

3. 表单实现方案 #

提供两种常用实现方案：

方案1：原生多选下拉（无需额外前端代码，实现最快） #

直接在表单文件中使用Rails内置辅助方法：

<!-- app/views/products/new.html.erb 表单部分 -->
<%= form_with model: @product do |form| %>
  <!-- 其他产品字段省略 -->
  <div class="field">
    <%= form.label :category_ids, "选择分类" %>
    <%= form.collection_select :category_ids, @categories, :id, :name, {}, multiple: true, class: "category-select" %>
    <p>按住Ctrl(Windows)/Command(Mac)可多选</p>
  </div>
  <div class="actions">
    <%= form.submit "提交" %>
  </div>
<% end %>

适合内部管理系统等对交互要求不高的场景。

方案2：带复选框的折叠下拉（用户体验更好） #

用内置的collection_check_boxes加少量前端代码实现折叠下拉效果：

<!-- 表单部分代码 -->
<%= form_with model: @product do |form| %>
  <!-- 其他产品字段省略 -->
  <div class="category-dropdown">
    <button type="button" class="dropdown-trigger">选择分类</button>
    <div class="dropdown-content">
      <%= form.collection_check_boxes :category_ids, @categories, :id, :name do |cb| %>
        <label class="checkbox-item">
          <%= cb.check_box %> <%= cb.text %>
        </label>
      <% end %>
    </div>
  </div>
  <div class="actions">
    <%= form.submit "提交" %>
  </div>
<% end %>

配套CSS代码（放到全局样式文件中即可）：

.category-dropdown {
  position: relative;
  display: inline-block;
}
.dropdown-trigger {
  padding: 6px 12px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
}
.dropdown-content {
  display: none;
  position: absolute;
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  padding: 8px;
  min-width: 120px;
  z-index: 999;
  margin-top: 4px;
}
.category-dropdown.active .dropdown-content {
  display: block;
}
.checkbox-item {
  display: block;
  margin: 4px 0;
  cursor: pointer;
}

配套JS代码（放到全局JS文件中即可）：

document.addEventListener('DOMContentLoaded', function() {
  const dropdown = document.querySelector('.category-dropdown')
  const trigger = dropdown.querySelector('.dropdown-trigger')
  // 点击触发展开/收起
  trigger.addEventListener('click', () => dropdown.classList.toggle('active'))
  // 点击下拉以外区域自动关闭
  document.addEventListener('click', (e) => {
    if (!dropdown.contains(e.target)) dropdown.classList.remove('active')
  })
})

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