实现两级联动下拉菜单并确保表单能同时提交分类ID与子分类ID

本文详解如何使用 jquery 实现基于类别选择动态更新子类别下拉框，并正确获取选中项的 `data-role` 属性，确保 `` 表单提交时能同时携带 `category` 和 `subcategory` 的真实值（如 id），满足后端数据处理需求。

在构建多级分类表单（如商品发布、内容归类）时，常需实现“一级分类 → 二级子分类”的联动效果。本例中，用户选择 #category 后，#subcategory 应仅显示对应 下的选项。但原始代码存在关键错误：$(this).data(‘role’) 尝试从 元素自身读取 data-role，而该属性实际定义在 标签上——因此必须定位到当前被选中的 元素。

✅ 正确做法是使用 $(this).find(‘:selected’) 获取选中项，再调用 .data(‘role’) 读取其 data-role 值（注意：jquery 的 .data() 方法自动将 data-role 转为驼峰式 role，且支持缓存解析，推荐使用；若需严格按 html 属性名读取，可用 .attr(‘data-role’)）。

以下是修复后的完整可运行示例：

      -- 请选择分类 --   时尚服饰   数码电子      -- 请选择子分类 --        男装     女装           电视机     游戏主机    

? 关键改进说明：

• $(this).find(‘:selected’).data(‘role’) 精准定位到，解决原始逻辑错误；
• 使用 .clone() 复制 而非直接移动，保留原始结构便于多次切换；
• 为 添加 name 属性（如 name=”category_id” 和 name=”subcategory_id”），确保表单提交时携带 category_id=1&subcategory_id=102 等标准键值对；
• 子分类 的 value 应设为数据库 ID（而非中文名），保障后端可直接使用；
• 建议添加默认空选项并初始化 #subcategory，提升用户体验与表单健壮性。

? 进阶提示： 若分类数据量大或需异步加载，建议改用 ajax 动态请求子分类 jsON 数据，减少初始 HTML 体积，并配合 loading 状态提示。