本文详解如何通过 jquery 实现「主分类 → 子分类」级联下拉框，并确保表单提交时同时携带 category id 和 subcategory value，修正原代码中 `$(this).data('role')` 误读 dom 属性的常见错误。
在构建多级联动表单（如商品分类选择）时，一个典型需求是：用户选择「主分类」后，「子分类」下拉框仅显示对应选项；更重要的是，最终提交表单时需同时获取主分类的 value（如 1）和子分类的 value（如 "Men's wear"），而非仅文本内容。原始代码的问题在于——$("#category").on("change", ...) 中的 this 指向
正确做法是：使用 $(this).find(':selected') 定位当前被选中的
以下是完整、可直接运行的修复版代码：
关键注意事项：
- ✅ name 属性不可省略：
- ✅ value 值建议语义化+安全化：子选项 value 使用 mens_wear 而非 'Men's wear'，避免引号转义问题与空格兼容性风险；
- ✅ .clone() 替代直接移动：防止多次切换后 $optgroups 缓存失效；
- ✅ 初始化清空逻辑：首次加载或切换时重置子下拉框值，避免提交脏数据；
- ? 生产环境增强建议：添加防 XSS 过滤（对 selectedRole 做白名单校验）、禁用空选项提交、以及加载状态提示。
通过以上实现，用户选择「Fashion」→「Men's wear」后，表单将准确提交 category_id=1 与 subcategory=mens_wear，满足后端业务逻辑所需的结构化分类参数。
