HTML 下拉联动：基于主选项动态筛选子选项并保留 value 值用于表单提交

本文详解如何使用 jquery 实现两级下拉菜单（category → subcategory）的联动效果，确保子选项正确按主选项分组显示，同时保留所有 `` 的 `value` 属性，使表单提交时能同时获取 category id 和 subcategory id。

在构建多级分类表单（如商品发布、内容归类等场景）时，常需实现“选择大类后，小类下拉框仅显示对应子项”的交互逻辑。上述代码的核心目标是：通过 data-role 属性关联主选项与 标签，并在切换时动态渲染子选项，同时不丢失任何 value 值——这是表单后端接收结构化数据（如 category=1&subcategory=Men%27s+wear）的前提。

但原始代码存在一个关键错误：$(this).data(‘role’) 尝试从 元素自身读取 data-role，而该属性实际定义在 其内部的 标签上。由于 本身无 data-role，selectedVal 恒为 undefined，导致后续 Filter(‘[label=”undefined”]’) 失败，子选项无法正确加载。

✅ 正确做法是：定位到当前被选中的 元素，再调用 .data(‘role’)：

var selectedVal = $(this).find(':selected').data('role');

完整可运行示例（含 html + jquery）如下：

立即学习“前端免费学习笔记（深入）”；

      — 请选择大类 —   Fashion   Electronics           Men's wear     Women's wear           Television     Game Console    

? 关键注意事项：

• ✅ name 属性必须为 category 和 subcategory，否则表单提交时字段名丢失；
• ✅ 子选项 的 value 应为数字 ID（如 101），而非纯文本（如 “Men’s wear”），便于后端安全识别与关联；
• ✅ 使用 .clone() 确保重新插入的 保留原始事件绑定与属性（若后续需扩展交互）；
• ⚠️ 若子选项需支持「无选择」状态，建议在每个 中添加— 请选择 —；
• ? 生产环境应增加 selectedRole 非空校验，防止 xss（如对 selectedRole 做白名单过滤或 HTML 转义）。

最终，用户提交表单时，将获得标准的键值对：category=1&subcategory=101，后端可直接解析并完成业务逻辑处理。此方案简洁、兼容性强，是前端分类联动的经典实践。