本文详解如何使用 jquery 实现两级下拉菜单（category → subcategory）的动态联动，确保子选项正确显示且所有 `
在构建多级分类表单（如商品发布、内容归类等场景）时，常需实现“选择主分类后，子分类下拉框仅显示对应选项”的交互效果。但原始代码中存在一个关键错误：$(this).data('role') 试图从 <select> 元素本身读取 data-role，而该属性实际定义在 <option> 上——导致 selectedVal 始终为 undefined，联动失效。
✅ 正确做法是：通过 $(this).find(':selected') 定位当前被选中的 <option>，再调用 .data('role') 获取其 data-role 值（注意：jQuery .data() 方法会自动将 data-role="Fashion" 解析为 "Fashion" 字符串）。
以下是修复后的完整可运行示例：
<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() 保证事件/数据完整性
});
});
</script>
<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>
<select name="subcategory_id" 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 属性不可省略：为两个 <select> 显式添加 name="category_id" 和 name="subcategory_id"，确保表单提交时以键值对形式发送（如 category_id=1&subcategory_id=102），便于后端接收；
- 使用 .clone() 而非直接 .html(...)：避免因原生 DOM 移动导致 optgroup 节点状态丢失（尤其在复杂场景下更健壮）；
- 初始选项建议增加空值：提升用户体验，并防止用户未选择即提交；
- value 值设计建议：子选项 value 应使用数字 ID（如 101）而非中文文本，既语义清晰又利于数据库关联与国际化；
- 扩展性提示：若分类数据量大或需异步加载，应改用 AJAX 请求后端接口动态渲染子选项，而非前端静态预置。
此方案兼顾简洁性与实用性，无需额外插件，兼容主流浏览器，可直接集成至现有表单系统中。
