本文详解如何通过 jquery 实现基于主分类（category）动态筛选子分类（subcategory）的下拉联动，并确保 `
在构建多级分类表单（如商品发布、内容归类等场景）时，常需实现“选择一级分类后，二级下拉仅显示对应子项”的交互效果。但许多开发者会忽略一个关键细节：
✅ 正确做法是：通过 $(this).find(':selected') 定位当前选中的
$("#category").on("change", function() {
// ✅ 正确：从选中的 option 获取 data-role
var selectedVal = $(this).find(':selected').data('role');
// 清空并重置 subcategory，仅插入匹配 label 的 optgroup
$('#subcategory').html($optgroups.filter('[label="' + selectedVal + '"]'));
});⚠️ 注意事项：
- 保留原始 value 属性：示例中所有
-
初始化状态处理：页面加载时，可主动触发一次 change 事件，使子分类默认显示首个主分类的选项：
$("#category").trigger("change"); - 无障碍与兼容性：
- 表单提交保障：两个
完整可运行示例（含修复后的初始化逻辑）：
立即学习“前端免费学习笔记（深入）”；
该方案简洁可靠，兼顾前端交互体验与后端数据接收需求，是多级下拉联动的经典实践模式。
