本文详解如何通过 jquery 实现基于主分类（category）动态筛选子分类（subcategory）的下拉联动，并确保 `
在构建多级分类表单（如商品发布、内容归类等场景）时，常需实现“选择一级分类后，二级下拉仅显示对应子项”的交互效果。但许多开发者会忽略一个关键细节：<select> 元素本身不携带 data-role 属性，该属性实际定义在被选中的 <option> 标签上。若直接对 $(this)（即 <select#category>）调用 .data('role')，将始终返回 undefined，导致后续 filter('[label="..."]') 失败，子分类无法正确渲染。
✅ 正确做法是：通过 $(this).find(':selected') 定位当前选中的 <option>，再从中读取 data-role 值：
$("#category").on("change", function() {
// ✅ 正确：从选中的 option 获取 data-role
var selectedVal = $(this).find(':selected').data('role');
// 清空并重置 subcategory，仅插入匹配 label 的 optgroup
$('#subcategory').html($optgroups.filter('[label="' + selectedVal + '"]'));
});⚠️ 注意事项：
- 保留原始 value 属性：示例中所有 <option> 的 value 均为语义化字符串（如 "Men's wear"），这完全满足表单提交需求；若需提交数字 ID，建议统一使用 value="101" 等格式，并在后端映射。
-
初始化状态处理：页面加载时，可主动触发一次 change 事件，使子分类默认显示首个主分类的选项：
$("#category").trigger("change"); - 无障碍与兼容性：<optgroup> 是标准 HTML 语义化标签，支持屏幕阅读器；jQuery 3.7+ 在现代浏览器中表现稳定，但若需原生 JS 方案，可用 event.target.selectedOptions[0].dataset.role 替代。
- 表单提交保障：两个 <select> 均设置了 name 属性（name="category" 需手动补充，name="subcategory" 已存在），服务端可通过 $_POST['category'] 和 $_POST['subcategory'] 同时获取两级 ID 或值。
完整可运行示例（含修复后的初始化逻辑）：
立即学习“前端免费学习笔记（深入）”；
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
var $optgroups = $('#subcategory > optgroup');
$("#category").on("change", function(){
var selectedVal = $(this).find(':selected').data('role');
$('#subcategory').html($optgroups.filter('[label="' + selectedVal + '"]'));
});
// 页面加载后自动初始化子分类（可选）
$("#category").trigger("change");
});
</script>
<select id="category" name="category">
<option value="1" data-role="Fashion">Fashion</option>
<option value="2" data-role="Electronics">Electronics</option>
</select>
<select name="subcategory" id="subcategory"></select>该方案简洁可靠，兼顾前端交互体验与后端数据接收需求，是多级下拉联动的经典实践模式。
