Rails7+Turbo/Stimulus三级联动下拉框选中状态不保留问题排查

问题核心 #

基于单Category模型（通过parent_id区分层级）实现的三级联动下拉框，能正常根据上级选项填充下级内容，但选中任意选项后会自动回到Select a category默认状态，无法保留选中值。

排查与解决方向 #

1. 视图层未正确绑定选中状态 #

检查下拉框渲染时是否根据已有值（如编辑场景的模型数据、URL参数）设置selected属性：

<!-- 一级分类示例 -->
<select data-controller="categories" data-categories-url="<%= categories_path %>" name="category_id">
  <option value="">Select a category</option>
  <% @categories.each do |category| %>
    <option value="<%= category.id %>" <%= 'selected' if category.id == @selected_category_id %>>
      <%= category.name %>
    </option>
  <% end %>
</select>

<!-- 二级/三级分类需添加data-selected属性传递预设值 -->
<select data-categories-target="subcategory" data-selected="<%= @selected_subcategory_id %>">
  <option value="">Select a subcategory</option>
</select>

2. Stimulus控制器未保留选中值 #

动态填充下级选项时，需判断预设选中ID并设置对应选项的selected属性，避免清空选中状态：

// categories_controller.js
import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static targets = ["category", "subcategory", "subsubcategory"]

  connect() {
    // 初始化时若有预设值，触发联动并保留选中状态
    if (this.categoryTarget.value) {
      this.loadSubcategories(this.categoryTarget.value)
      if (this.subcategoryTarget.value) {
        this.loadSubsubcategories(this.subcategoryTarget.value)
      }
    }
  }

  loadSubcategories(categoryId) {
    fetch(`/categories?parent_id=${categoryId}`)
      .then(res => res.json())
      .then(data => {
        this.subcategoryTarget.innerHTML = '<option value="">Select a subcategory</option>'
        data.forEach(category => {
          const option = document.createElement('option')
          option.value = category.id
          option.textContent = category.name
          // 匹配预设选中值
          if (option.value === this.subcategoryTarget.dataset.selected) {
            option.selected = true
          }
          this.subcategoryTarget.appendChild(option)
        })
        this.subsubcategoryTarget.innerHTML = '<option value="">Select a subsubcategory</option>'
      })
  }

  loadSubsubcategories(subcategoryId) {
    fetch(`/categories?parent_id=${subcategoryId}`)
      .then(res => res.json())
      .then(data => {
        this.subsubcategoryTarget.innerHTML = '<option value="">Select a subsubcategory</option>'
        data.forEach(category => {
          const option = document.createElement('option')
          option.value = category.id
          option.textContent = category.name
          if (option.value === this.subsubcategoryTarget.dataset.selected) {
            option.selected = true
          }
          this.subsubcategoryTarget.appendChild(option)
        })
      })
  }
}

3. 表单提交/页面刷新导致状态丢失 #

• 若为表单提交场景，确保后端控制器正确保存选中的分类ID，并重定向时将该值传递回视图；
• 单页交互场景下，检查是否存在意外触发页面刷新的逻辑（如表单未阻止默认提交行为）。

4. 后端数据返回格式验证 #

确认接口返回的分类数据包含正确的id和name字段，避免因数据格式错误导致选项渲染失败：

# categories_controller.rb
def index
  @categories = Category.where(parent_id: params[:parent_id] || nil)
  render json: @categories.map { |c| { id: c.id, name: c.name } }
end

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