JavaScript 中怎么用事件委托实现城市级联选择-js教程-PHP中文网

用事件委托实现城市级联选择，核心是将change事件绑定在父容器上，通过event.target识别触发元素并动态加载下级数据；结构上用data-level和data-parent-id标记层级与关联id；按需加载、联动清空下级，确保状态一致。

javascript 中怎么用事件委托实现城市级联选择

用事件委托实现城市级联选择，核心是把点击/选择事件统一绑定在父容器上，通过 event.target 判断实际触发元素，再动态加载下一级数据。这样避免为每个城市选项重复绑定事件，也兼容后续异步插入的 DOM 节点。

结构设计：用 data 属性标记层级和 ID

HTML 中每个选择器（<select></select>）用 data-level 标明层级（如 province、city、area），并用 data-parent-id 记录上级选中的 ID（初始可为空）。例如：

<div id="city-selector">
  <select data-level="province"><option value="">请选择省份</option></select><select data-level="city" data-parent-id="" disabled><option value="">请选择城市</option></select><select data-level="area" data-parent-id="" disabled><option value="">请选择区县</option></select>
</div>

这样结构清晰，JS 可以按属性精准定位目标元素。

绑定一次事件，用委托响应所有下拉变化

监听父容器的 change 事件，不给每个 <select></select> 单独绑定：

说明：
- 检查 event.target 是否为 <select></select> 且有 data-level
- 获取当前选中的 value 和 level
- 找到下一级 <select></select>（比如当前是 province，则找 data-level="city"）
- 清空下级选项，设置 data-parent-id，并启用它

建议代码片段：

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

document.getElementById('city-selector').addEventListener('change', function (e) {
  const select = e.target;
  if (select.tagName !== 'SELECT' || !select.dataset.level) return;
<p>const level = select.dataset.level;
const value = select.value;
const nextLevel = getNextLevel(level); // 如 'province' → 'city'</p><p>const nextSelect = this.querySelector(<code>select[data-level="${nextLevel}"]</code>);
if (!nextSelect) return;</p><p>// 清空并禁用下级
nextSelect.innerHTML = '<option value="">请选择</option>';
nextSelect.disabled = true;
nextSelect.dataset.parentId = value;</p><p>// 仅当有有效值才加载下级数据
if (value) {
loadOptions(nextSelect, value, nextLevel);
}
});</p>

按需加载数据：避免一次性载入全部城市

城市数据量大，推荐按需请求或本地分层对象查找：

服务端接口示例：GET /api/areas?parent=110000&level=city
前端本地映射（适合中小型数据）：用对象嵌套，如 cities['110000'] = [{id:'110100', name:'北京市'}, ...]
加载时显示 loading 状态，防止重复点击；加载失败给出提示

关键点：每次只查当前 data-parent-id 对应的下级列表，不预加载无关数据。

联动控制：处理清空与回退逻辑

用户切换上级时，下级必须重置：

当前 select 的 value 改变后，所有下级 <select></select> 都要清空、禁用、清除 data-parent-id
可用 this.querySelectorAll(`select[data-level="${nextLevel}"], select[data-level="${furtherLevel}"]`) 一次性获取并重置
支持用户手动清空某一级（选“请选择”），自动清空其所有后代级

这样能保证状态始终一致，不会出现“广东→深圳→天河区”，再切回“北京”后还显示“天河区”的情况。