本文详解如何使用 jquery 实现基于类别选择动态更新子类别下拉框，并正确获取选中项的 `data-role` 属性，确保 `
在构建多级分类表单（如商品发布、内容归类）时，常需实现“一级分类 → 二级子分类”的联动效果。本例中，用户选择 #category 后，#subcategory 应仅显示对应
✅ 正确做法是使用 $(this).find(':selected') 获取选中项，再调用 .data('role') 读取其 data-role 值（注意：jQuery 的 .data() 方法自动将 data-role 转为驼峰式 role，且支持缓存解析，推荐使用；若需严格按 HTML 属性名读取，可用 .attr('data-role')）。
以下是修复后的完整可运行示例：
? 关键改进说明：
- $(this).find(':selected').data('role') 精准定位到
- 使用 .clone() 复制
- 为
- 子分类
- 建议添加默认空选项并初始化 #subcategory，提升用户体验与表单健壮性。
? 进阶提示： 若分类数据量大或需异步加载，建议改用 AJAX 动态请求子分类 JSON 数据，减少初始 HTML 体积，并配合 loading 状态提示。
