本文详解如何使用 jquery 实现两级下拉菜单（category → subcategory）的联动效果，确保子选项正确按主选项分组显示，同时保留所有 `
在构建多级分类表单（如商品发布、内容归类等场景）时，常需实现“选择大类后，小类下拉框仅显示对应子项”的交互逻辑。上述代码的核心目标是：通过 data-role 属性关联主选项与 <optgroup> 标签，并在切换时动态渲染子选项，同时不丢失任何 value 值——这是表单后端接收结构化数据（如 category=1&subcategory=Men%27s+wear）的前提。
但原始代码存在一个关键错误：$(this).data('role') 尝试从 <select id="category"> 元素自身读取 data-role，而该属性实际定义在 其内部的 <option> 标签上。由于 <select> 本身无 data-role，selectedVal 恒为 undefined，导致后续 filter('[label="undefined"]') 失败，子选项无法正确加载。
✅ 正确做法是：定位到当前被选中的 <option> 元素，再调用 .data('role')：
var selectedVal = $(this).find(':selected').data('role');完整可运行示例（含 HTML + jQuery）如下：
立即学习“前端免费学习笔记（深入）”；
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
// 预存所有 optgroup，避免重复 DOM 查询
var $optgroups = $('#subcategory > optgroup');
$("#category").on("change", function(){
var selectedOpt = $(this).find(':selected');
var selectedRole = selectedOpt.data('role'); // ✅ 正确获取 option 的 data-role
// 清空并插入匹配 label 的 optgroup 内容
$('#subcategory').html(
$optgroups.filter('[label="' + selectedRole + '"]').clone()
);
});
});
</script>
<select id="category" name="category">
<option value="">— 请选择大类 —</option>
<option value="1" data-role="Fashion">Fashion</option>
<option value="2" data-role="Electronics">Electronics</option>
</select>
<select name="subcategory" id="subcategory">
<optgroup label="Fashion">
<option value="101">Men's wear</option>
<option value="102">Women's wear</option>
</optgroup>
<optgroup label="Electronics">
<option value="201">Television</option>
<option value="202">Game Console</option>
</optgroup>
</select>? 关键注意事项：
- ✅ name 属性必须为 category 和 subcategory，否则表单提交时字段名丢失；
- ✅ 子选项 <option> 的 value 应为数字 ID（如 101），而非纯文本（如 "Men's wear"），便于后端安全识别与关联；
- ✅ 使用 .clone() 确保重新插入的 <option> 保留原始事件绑定与属性（若后续需扩展交互）；
- ⚠️ 若子选项需支持「无选择」状态，建议在每个 <optgroup> 中添加 <option value="">— 请选择 —</option>；
- ? 生产环境应增加 selectedRole 非空校验，防止 XSS（如对 selectedRole 做白名单过滤或 HTML 转义）。
最终，用户提交表单时，将获得标准的键值对：category=1&subcategory=101，后端可直接解析并完成业务逻辑处理。此方案简洁、兼容性强，是前端分类联动的经典实践。
