级联选择器用事件委托实现联动，即监听父容器change事件，通过event.target识别触发的select并动态更新后续下拉框。需用data-role标记层级，只操作option不替换select元素，统一处理重置与禁用逻辑。
在级联选择器（如省→市→区三级联动）中，用事件委托处理选项联动，核心是：**把事件监听绑定在共同父容器上，通过事件冒泡捕获子 <select></select> 的 change 事件，再根据 event.target 判断触发源，动态更新后续下拉框**。这样避免为每个 <select></select> 单独绑定事件，也兼容后续动态插入的节点。
1. 结构设计：用 data 属性标记层级关系
给每个 <select></select> 添加 data-level 或 data-role，比如 data-role="province"、data-role="city"、data-role="district"；同时用 data-parent-value 或 data-linked-to 表明依赖关系（可选）。结构示例如下：
<div id="cascade-container"> <select data-role="province"><option value="">请选择省份</option></select><select data-role="city" disabled><option value="">请选择城市</option></select><select data-role="district" disabled><option value="">请选择区县</option></select> </div>
2. 绑定委托事件：监听父容器的 change
只在 #cascade-container 上监听一次 change，利用事件冒泡机制响应所有内部 <select></select> 的变化：
- 检查
event.target是否为<select></select>，并获取其dataset.role - 根据当前角色（如
"province"），清空并禁用后续所有下拉框（如 city、district） - 调用对应的数据加载函数（如
loadCities(value)），异步填充下一级选项 - 加载成功后启用下一级
<select></select>，并保留其data-role用于下一轮委托
3. 数据加载与 DOM 更新：保持委托链有效
每次更新下拉框内容时，**不要替换整个 <select></select> 元素**，只清空 <option></option> 并追加新选项。否则会丢失事件绑定（但委托不受影响，因为监听的是父容器）。示例片段：
// 假设已拿到城市数组 cities = [{id: '1', name: '北京'}, ...]
const citySelect = document.querySelector('[data-role="city"]');
citySelect.innerHTML = '<option value="">请选择城市</option>';
cities.forEach(c => {
const opt = document.createElement('option');
opt.value = c.id;
opt.textContent = c.name;
citySelect.appendChild(opt);
});
citySelect.disabled = false;
4. 防止重复触发与边界处理
实际使用中需注意：
- 当用户切换省份时，应重置 city 和 district 的值（
value = ""），并禁用它们 - 如果某级无数据（如该省无下属城市），应清空下一级且保持禁用状态
- 可加节流或判断
event.target.value是否真正改变，避免空值或重复提交触发冗余请求 - 若支持“回退”（如改选上级后下级自动清空），可在委托逻辑中统一处理：匹配当前
data-role后，查找所有data-role序号更大的兄弟<select></select>并重置
不复杂但容易忽略的是：委托本身不解决数据获取逻辑，重点在于把“谁变了 → 谁要更新 → 怎么更新”这三层关系，通过属性标记和统一入口收束清楚。只要结构清晰、更新只操作 option、监听始终在父层，联动就能稳定响应，也方便后期扩展四级甚至搜索式筛选。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
