本文详解如何使用 jquery 实现两级下拉菜单（category → subcategory）的联动效果，确保子选项正确按主选项分组显示，同时保留所有 `
在构建多级分类表单（如商品发布、内容归类等场景）时，常需实现“选择大类后，小类下拉框仅显示对应子项”的交互逻辑。上述代码的核心目标是：通过 data-role 属性关联主选项与
但原始代码存在一个关键错误：$(this).data('role') 尝试从
✅ 正确做法是：定位到当前被选中的 ：
var selectedVal = $(this).find(':selected').data('role');完整可运行示例（含 HTML + jQuery）如下：
立即学习“前端免费学习笔记（深入）”；
? 关键注意事项：
- ✅ name 属性必须为 category 和 subcategory，否则表单提交时字段名丢失；
- ✅ 子选项
- ✅ 使用 .clone() 确保重新插入的
- ⚠️ 若子选项需支持「无选择」状态，建议在每个
- ? 生产环境应增加 selectedRole 非空校验，防止 XSS（如对 selectedRole 做白名单过滤或 HTML 转义）。
最终，用户提交表单时，将获得标准的键值对：category=1&subcategory=101，后端可直接解析并完成业务逻辑处理。此方案简洁、兼容性强，是前端分类联动的经典实践。
