HTML 下拉联动：基于主分类动态更新子分类并保留 value 值用于表单提交

本文详解如何使用 jquery 实现两级下拉菜单（category → subcategory）的动态联动，确保子选项正确显示且所有 `` 的 `value` 属性完整保留，从而支持后端同时接收 category id 和 subcategory id。

在构建多级分类表单（如商品发布、内容归类等场景）时，常需实现“选择主分类后，子分类下拉框仅显示对应选项”的交互效果。但原始代码中存在一个关键错误：$(this).data(‘role’) 试图从 元素本身读取 data-role，而该属性实际定义在 上——导致 selectedVal 始终为 undefined，联动失效。

✅ 正确做法是：通过 $(this).find(‘:selected’) 定位当前被选中的，再调用 .data(‘role’) 获取其 data-role 值（注意：jquery .data() 方法会自动将 data-role=”Fashion” 解析为 “Fashion” 字符串）。

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

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

? 关键要点说明：

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

• name 属性不可省略：为两个 显式添加 name=”category_id” 和 name=”subcategory_id”，确保表单提交时以键值对形式发送（如 category_id=1&subcategory_id=102），便于后端接收；
• 使用 .clone() 而非直接 .html(…)：避免因原生 dom 移动导致 optgroup 节点状态丢失（尤其在复杂场景下更健壮）；
• 初始选项建议增加空值：提升用户体验，并防止用户未选择即提交；
• value 值设计建议：子选项 value 应使用数字 ID（如 101）而非中文文本，既语义清晰又利于数据库关联与国际化；
• 扩展性提示：若分类数据量大或需异步加载，应改用 ajax 请求后端接口动态渲染子选项，而非前端静态预置。

此方案兼顾简洁性与实用性，无需额外插件，兼容主流浏览器，可直接集成至现有表单系统中。