关键在从选中option读data-属性：$(this).find(':selected').data('role')，而非select本身；data-仅驱动前端联动，value才提交后端。
用 data-* 属性做下拉联动，关键在选中项而非 select 元素本身
很多人卡在第一步：给 <select></select> 加 data-role 或 data-category，然后在 change 事件里写 $(this).data('role') —— 这永远是 undefined。因为 data-* 属性必须挂在 <option></option> 上，且只能从当前选中的那个 <option></option> 读取。
常见错误现象：$('#subcategory').html(...) 渲染为空，或始终加载同一组子项；调试发现 selectedVal 是 undefined。
- 正确做法：用
$(this).find(':selected').data('role')或原生event.target.selectedOptions[0].dataset.role - 不要给
<select></select>写data-*，它不参与数据映射逻辑 - 每个
<option></option>的value仍用于表单提交，data-*只负责驱动联动
data-* 值怎么和子选项匹配：用 label、data-group 或自定义键都行
子下拉菜单的选项分组方式决定了你用哪个 data-* 字段做匹配依据。最常用的是 label（配合 <optgroup></optgroup>）或 data-group（更语义化、不依赖 HTML 结构）。
使用场景：主分类为 “Electronics”，子分类需只显示 “Laptops” 和 “Phones” 两个 <optgroup></optgroup> 下的 <option></option>。
- 若用
<optgroup label="Electronics"></optgroup>，则匹配filter('[label="' + selectedVal + '"]') - 若用
<optgroup data-group="electronics"></optgroup>，则匹配filter('[data-group="' + selectedVal + '"]')，更灵活、避免空格/引号问题 - 注意：
selectedVal来自<option></option>的data-role，不是value；两者可以不同（如value="laptop"，data-role="electronics"）
联动时清空并重置子下拉，别只 hide 或 disabled
只调用 .hide() 或设 disabled 不够——用户提交表单时，被隐藏但未移除的 <option></option> 仍可能被后端收到（尤其用 FormData 或 jQuery .serialize()）。
性能影响：频繁操作 DOM 时，用 .html() 一次性替换比循环 .remove() + .append() 更快；若子选项多，建议预存所有 <optgroup></optgroup> 到变量，避免重复查询。
- 务必先清空：用
$('#subcategory').empty()或.html('') - 再插入匹配分组：
$('#subcategory').html($optgroups.filter(...))，不是.append() - 初始化要触发一次：
$("#category").trigger("change")，否则页面加载后子菜单为空
表单提交时 value 和 data-* 都能保留，但后端只收 value
data-* 是纯前端行为，不会随表单自动提交；它的唯一作用是驱动 JS 逻辑。真正进后端的只有 <select name="category"></select> 和 <select name="subcategory"></select> 的 value 值。
容易踩的坑：有人把 ID 存进 value，描述存在 data-label，结果后端解析时发现 value 是数字但没对应文本——其实没问题，只要前后端约定好 value 就是业务 ID 即可。
- 推荐写法：
<option value="101" data-role="electronics">Laptops</option> - 后端收
$_POST['category']和$_POST['subcategory']，值就是"101"这类 ID -
data-*字段完全不出现在 HTTP 请求体里，别指望它传到服务端
复杂点在于多级嵌套时的 data 层级管理——比如三级联动要同时读 data-level1 和 data-level2，这时候用对象结构（如 data-context='{"cat":"101","sub":"205"}'）反而更易维护，但得 JSON.parse，注意引号转义。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
