本文详解如何使用 jquery 实现基于类别选择动态更新子类别下拉框，并正确获取选中项的 `data-role` 属性，确保 `
在构建多级分类表单（如商品发布、内容归类）时，常需实现“一级分类 → 二级子分类”的联动效果。本例中，用户选择 #category 后，#subcategory 应仅显示对应 <optgroup> 下的选项。但原始代码存在关键错误：$(this).data('role') 尝试从 <select> 元素自身读取 data-role，而该属性实际定义在 <option> 标签上——因此必须定位到当前被选中的 <option> 元素。
✅ 正确做法是使用 $(this).find(':selected') 获取选中项，再调用 .data('role') 读取其 data-role 值（注意：jQuery 的 .data() 方法自动将 data-role 转为驼峰式 role，且支持缓存解析，推荐使用；若需严格按 HTML 属性名读取，可用 .attr('data-role')）。
以下是修复后的完整可运行示例：
<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 $targetGroup = $optgroups.filter('[label="' + selectedRole + '"]');
$('#subcategory').html($targetGroup.clone()); // 使用 clone() 避免原节点被移除
// ? 重要补充：重置子分类选中状态（可选）
$('#subcategory').val('');
});
});
</script>
<select id="category" name="category_id">
<option value="">-- 请选择分类 --</option>
<option value="1" data-role="Fashion">时尚服饰</option>
<option value="2" data-role="Electronics">数码电子</option>
</select>
<select name="subcategory_id" id="subcategory">
<option value="">-- 请选择子分类 --</option>
<optgroup label="Fashion">
<option value="101">男装</option>
<option value="102">女装</option>
</optgroup>
<optgroup label="Electronics">
<option value="201">电视机</option>
<option value="202">游戏主机</option>
</optgroup>
</select>? 关键改进说明：
- $(this).find(':selected').data('role') 精准定位到 <option>，解决原始逻辑错误；
- 使用 .clone() 复制 <optgroup> 而非直接移动，保留原始结构便于多次切换；
- 为 <select> 添加 name 属性（如 name="category_id" 和 name="subcategory_id"），确保表单提交时携带 category_id=1&subcategory_id=102 等标准键值对；
- 子分类 <option> 的 value 应设为数据库 ID（而非中文名），保障后端可直接使用；
- 建议添加默认空选项并初始化 #subcategory，提升用户体验与表单健壮性。
? 进阶提示： 若分类数据量大或需异步加载，建议改用 AJAX 动态请求子分类 JSON 数据，减少初始 HTML 体积，并配合 loading 状态提示。
