本文详解如何通过 jquery 实现「主分类 → 子分类」级联下拉框，并确保表单提交时同时携带 category id 和 subcategory value，修正原代码中 `$(this).data('role')` 误读 dom 属性的常见错误。
在构建多级联动表单（如商品分类选择）时，一个典型需求是：用户选择「主分类」后，「子分类」下拉框仅显示对应选项；更重要的是，最终提交表单时需同时获取主分类的 value（如 1）和子分类的 value（如 "Men's wear"），而非仅文本内容。原始代码的问题在于——$("#category").on("change", ...) 中的 this 指向 <select> 元素本身，而 data-role 属性实际定义在 <option> 上，因此 $(this).data('role') 始终返回 undefined，导致筛选失败。
正确做法是：使用 $(this).find(':selected') 定位当前被选中的 <option> 元素，再调用 .data('role') 获取其 data-role 值。该值作为 optgroup 的 label 匹配依据，从而精准过滤并重置子下拉框内容。
以下是完整、可直接运行的修复版代码：
<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(){
// ✅ 正确获取选中 option 的 data-role 值
var selectedRole = $(this).find(':selected').data('role');
// 筛选匹配 label 的 optgroup，并替换 #subcategory 内容
var $matchedGroup = $optgroups.filter('[label="' + selectedRole + '"]');
$('#subcategory').html($matchedGroup.clone()); // 使用 clone() 避免原节点被移除
// ⚠️ 补充：重置子选择框，防止残留旧值
$('#subcategory').val('');
});
});
</script>
<!-- 主分类：value 用于提交 ID，data-role 用于联动 -->
<select id="category" name="category_id">
<option value="">-- 请选择主分类 --</option>
<option value="1" data-role="Fashion">Fashion</option>
<option value="2" data-role="Electronics">Electronics</option>
</select>
<!-- 子分类：name 属性确保表单提交时包含该字段 -->
<select name="subcategory" id="subcategory">
<optgroup label="Fashion">
<option value="mens_wear">Men's wear</option>
<option value="womens_wear">Women's wear</option>
</optgroup>
<optgroup label="Electronics">
<option value="television">Television</option>
<option value="game_console">Game Console</option>
</optgroup>
</select>
<!-- 示例表单，验证双值提交 -->
<form action="/submit" method="POST">
<input type="submit" value="提交分类选择">
</form>关键注意事项：
- ✅ name 属性不可省略：<select name="category_id"> 和 <select name="subcategory"> 是服务端接收数据的必要标识；
- ✅ value 值建议语义化+安全化：子选项 value 使用 mens_wear 而非 'Men's wear'，避免引号转义问题与空格兼容性风险；
- ✅ .clone() 替代直接移动：防止多次切换后 $optgroups 缓存失效；
- ✅ 初始化清空逻辑：首次加载或切换时重置子下拉框值，避免提交脏数据；
- ? 生产环境增强建议：添加防 XSS 过滤（对 selectedRole 做白名单校验）、禁用空选项提交、以及加载状态提示。
通过以上实现，用户选择「Fashion」→「Men's wear」后，表单将准确提交 category_id=1 与 subcategory=mens_wear，满足后端业务逻辑所需的结构化分类参数。
