当前位置：首页 > news >正文

原生JavaScript实现三级联动：从数据结构到性能优化的完整指南

news 2026/8/12 16:39:42

1. 项目概述：从“三级联动”说起

在Web前端开发里，“三级联动”是一个高频出现且非常经典的需求场景。它指的是三个下拉选择框（Select）之间存在级联关系：第一个框的选择结果，决定了第二个框的可选项；第二个框的选择结果，又决定了第三个框的可选项。这种交互模式在省市区选择、商品分类筛选、多级菜单导航等场景中无处不在。虽然现在很多UI框架（如Element UI、Ant Design）都提供了现成的组件，但理解其背后的原生JavaScript实现逻辑，对于巩固基础、应对复杂定制化需求至关重要。这次，我们就抛开框架，用最纯粹的JavaScript，从零开始构建一个健壮、可复用的三级联动效果。

2. 核心思路与数据结构设计

2.1 联动关系的本质：数据驱动视图

三级联动的核心是“数据驱动”。我们需要一份结构化的数据来定义三个层级之间的归属关系。最常见的数据结构是嵌套对象或数组。

方案一：嵌套对象这种结构直观，易于理解，但动态查找和遍历相对复杂。

const data = { "中国": { "广东省": ["广州市", "深圳市", "东莞市"], "浙江省": ["杭州市", "宁波市", "温州市"] }, "美国": { "加利福尼亚州": ["洛杉矶", "旧金山"], "纽约州": ["纽约市", "布法罗"] } };

方案二：扁平化数组（推荐）这是更通用、更灵活的方案。每个数据项都是一个独立对象，通过一个共同的字段（如pid）来建立父子关系。这种结构便于后端存储、传输和前端进行灵活的筛选。

const flatData = [ { id: 1, name: '中国', pid: 0 }, { id: 2, name: '美国', pid: 0 }, { id: 3, name: '广东省', pid: 1 }, { id: 4, name: '浙江省', pid: 1 }, { id: 5, name: '广州市', pid: 3 }, { id: 6, name: '深圳市', pid: 3 }, { id: 7, name: '杭州市', pid: 4 }, // ... 更多数据 ];

在这个结构中，pid（parent id）为0的项是一级选项，pid为某个一级项id的项是其二级选项，以此类推。我们选择第二种方案进行实现，因为它更贴近真实项目中的数据形态。

2.2 功能流程拆解

整个功能的运行流程可以分解为以下几个关键步骤：

初始化：页面加载时，从数据源（可以是硬编码、异步请求）获取数据，并渲染第一级（省）的下拉选项。
一级选择事件：当用户选择第一级（省）时，根据选中的id，从数据中筛选出所有pid等于该id的项，作为第二级（市）的选项进行渲染，同时清空第三级（区）的选项。
二级选择事件：当用户选择第二级（市）时，根据选中的id，从数据中筛选出所有pid等于该id的项，作为第三级（区）的选项进行渲染。
状态重置：任何时候，如果用户将上一级的选择更改为“请选择”或空值，则其下级所有选项都应被清空并禁用。

3. 核心代码实现与逐行解析

我们将创建一个名为TripleLinkage的类来封装所有逻辑，实现高内聚、低耦合。

3.1 HTML结构搭建

首先，需要一个清晰的DOM结构作为操作对象。

<div class="linkage-container"> <select id="province"> <option value="">请选择省份</option> </select> <select id="city" disabled> <option value="">请选择城市</option> </select> <select id="area" disabled> <option value="">请选择区县</option> </select> </div>

注意：初始状态下，第二级和第三级的select元素被设置为disabled（禁用），因为在一级未选择时，它们没有可选项，这符合用户体验。

3.2 JavaScript类实现

class TripleLinkage { /** * 构造函数 * @param {Object} options 配置项 * @param {Array} options.data 扁平化的数据数组 * @param {string} options.provinceId 省份下拉框的ID * @param {string} options.cityId 城市下拉框的ID * @param {string} options.areaId 区县下拉框的ID * @param {string} options.firstLevelPid 第一级数据的父ID（默认为0） */ constructor(options) { // 合并配置项 this.config = Object.assign({ data: [], provinceId: 'province', cityId: 'city', areaId: 'area', firstLevelPid: 0 }, options); // 获取DOM元素 this.provinceEl = document.getElementById(this.config.provinceId); this.cityEl = document.getElementById(this.config.cityId); this.areaEl = document.getElementById(this.config.areaId); // 数据缓存 this.data = this.config.data; // 初始化 this.init(); } /** * 初始化方法：渲染第一级并绑定事件 */ init() { this.renderSelect(this.provinceEl, this.filterDataByPid(this.config.firstLevelPid)); this.bindEvents(); } /** * 根据父ID筛选数据 * @param {number|string} pid 父级ID * @returns {Array} 筛选后的数据数组 */ filterDataByPid(pid) { // 使用filter方法，筛选出pid匹配且name不为空的项 return this.data.filter(item => String(item.pid) === String(pid) && item.name); } /** * 渲染下拉框选项 * @param {HTMLElement} selectEl 目标select元素 * @param {Array} dataList 要渲染的数据数组 * @param {string} placeholder 默认提示文本 */ renderSelect(selectEl, dataList, placeholder = '请选择') { // 清空现有选项（保留第一个placeholder选项） const firstOption = selectEl.querySelector('option'); selectEl.innerHTML = ''; if (firstOption) { selectEl.appendChild(firstOption); } else { // 如果没有默认选项，则创建一个 const defaultOption = new Option(placeholder, ''); selectEl.appendChild(defaultOption); } // 如果数据列表为空，则禁用该下拉框 if (!dataList || dataList.length === 0) { selectEl.disabled = true; return; } // 启用下拉框并追加数据选项 selectEl.disabled = false; dataList.forEach(item => { const option = new Option(item.name, item.id); selectEl.appendChild(option); }); } /** * 绑定所有下拉框的change事件 */ bindEvents() { // 省份选择变化 this.provinceEl.addEventListener('change', (e) => { const selectedPid = e.target.value; this.onProvinceChange(selectedPid); }); // 城市选择变化 this.cityEl.addEventListener('change', (e) => { const selectedPid = e.target.value; this.onCityChange(selectedPid); }); } /** * 省份选择变化处理函数 * @param {string} provinceId 选中的省份ID */ onProvinceChange(provinceId) { if (!provinceId) { // 如果省份被清空，则清空并禁用城市和区县 this.renderSelect(this.cityEl, []); this.renderSelect(this.areaEl, []); return; } // 根据选中的省份ID，渲染对应的城市列表 const cityList = this.filterDataByPid(provinceId); this.renderSelect(this.cityEl, cityList, '请选择城市'); // 清空区县 this.renderSelect(this.areaEl, []); } /** * 城市选择变化处理函数 * @param {string} cityId 选中的城市ID */ onCityChange(cityId) { if (!cityId) { // 如果城市被清空，则清空区县 this.renderSelect(this.areaEl, []); return; } // 根据选中的城市ID，渲染对应的区县列表 const areaList = this.filterDataByPid(cityId); this.renderSelect(this.areaEl, areaList, '请选择区县'); } /** * 获取当前选中的值（常用于表单提交） * @returns {Object} 包含省、市、区名称和ID的对象 */ getSelectedValues() { const getSelectedText = (el) => el.options[el.selectedIndex]?.text || ''; const getSelectedValue = (el) => el.value || ''; return { province: { name: getSelectedText(this.provinceEl), id: getSelectedValue(this.provinceEl) }, city: { name: getSelectedText(this.cityEl), id: getSelectedValue(this.cityEl) }, area: { name: getSelectedText(this.areaEl), id: getSelectedValue(this.areaEl) } }; } /** * 外部设置数据的方法（可用于异步加载数据后更新） * @param {Array} newData 新的数据数组 */ setData(newData) { this.data = newData; // 重置所有选择 this.renderSelect(this.provinceEl, this.filterDataByPid(this.config.firstLevelPid)); this.renderSelect(this.cityEl, []); this.renderSelect(this.areaEl, []); } }

3.3 初始化与使用示例

在页面加载后，初始化我们的三级联动组件。

// 模拟的扁平化数据 const mockData = [ { id: '1', name: '北京市', pid: '0' }, { id: '2', name: '广东省', pid: '0' }, { id: '3', name: '广州市', pid: '2' }, { id: '4', name: '深圳市', pid: '2' }, { id: '5', name: '天河区', pid: '3' }, { id: '6', name: '越秀区', pid: '3' }, { id: '7', name: '南山区', pid: '4' }, { id: '8', name: '福田区', pid: '4' }, ]; // 实例化联动组件 const linkage = new TripleLinkage({ data: mockData, provinceId: 'province', cityId: 'city', areaId: 'area', firstLevelPid: '0' // 一级数据的父ID是'0' }); // 后续可以通过 linkage.getSelectedValues() 获取用户选择 // 也可以通过 linkage.setData(newData) 动态更新数据源

4. 关键细节与性能优化实战

4.1 事件委托与性能考量

在上面的代码中，我们直接为每个select元素绑定了change事件。在只有三个元素的情况下，这完全没有问题。但如果页面上有多个三级联动实例，或者联动级数更多（如五级），事件监听器的数量会线性增长。这时可以考虑使用事件委托。

我们可以将事件监听绑定在它们的公共容器上。

bindEvents() { const container = this.provinceEl.parentNode; // 假设它们有一个共同的父容器 container.addEventListener('change', (e) => { const target = e.target; if (target === this.provinceEl) { this.onProvinceChange(target.value); } else if (target === this.cityEl) { this.onCityChange(target.value); } // 如果是更多级，继续添加判断 }); }

事件委托减少了事件监听器的数量，对性能有轻微提升，尤其在动态创建/销毁组件的复杂单页应用（SPA）中优势更明显。但在本例中，简单直接的绑定方式代码更清晰。

4.2 数据筛选的优化

我们的filterDataByPid方法在每次选择时都会遍历整个数据数组。当数据量非常大（例如数万条）时，频繁的Array.filter操作可能成为性能瓶颈。

优化方案：建立数据索引我们可以在初始化时，预处理数据，建立一个以pid为键的映射，将子项数组缓存起来。

constructor(options) { // ... 其他初始化代码 this.data = this.config.data; this._dataMap = this.buildDataMap(this.data); // 构建数据映射 this.init(); } /** * 构建一个以pid为键，子项数组为值的映射 */ buildDataMap(data) { const map = {}; data.forEach(item => { const pid = item.pid; if (!map[pid]) { map[pid] = []; } map[pid].push(item); }); return map; } filterDataByPid(pid) { // 直接从映射中获取，时间复杂度接近O(1) return this._dataMap[pid] || []; }

这个优化将每次筛选的复杂度从O(n)降低到了O(1)，对于大数据量场景是质的飞跃。

4.3 用户体验增强：默认值与回填

在实际业务中，我们常常需要编辑一个已有数据，这就需要“回填”功能。例如，编辑一个用户资料，需要根据其已有的“省-市-区”ID，自动选中对应的选项。

我们需要为TripleLinkage类增加一个setValues方法。

/** * 根据给定的ID设置各级选中状态 * @param {Object} values 包含省、市、区ID的对象 */ setValues(values) { const { provinceId, cityId, areaId } = values; // 1. 设置省份 if (provinceId) { this.provinceEl.value = provinceId; // 手动触发省份的change事件，以加载对应的城市 this.onProvinceChange(provinceId); // 2. 设置城市（需要等待省份的选项渲染完成，这里用微任务模拟） setTimeout(() => { if (cityId && this.cityEl.querySelector(`option[value="${cityId}"]`)) { this.cityEl.value = cityId; // 手动触发城市的change事件，以加载对应的区县 this.onCityChange(cityId); // 3. 设置区县 setTimeout(() => { if (areaId && this.areaEl.querySelector(`option[value="${areaId}"]`)) { this.areaEl.value = areaId; } }, 0); } }, 0); } }

注意：这里使用了setTimeout(fn, 0)来将代码推入下一个事件循环执行。这是因为renderSelect是同步的，但我们需要确保DOM选项已经被渲染出来之后，再去设置value。在更严谨的实现中，可以考虑使用Promise或回调函数来确保执行顺序。

使用方式：

// 假设要回填的用户地址ID是：广东省(2)、深圳市(4)、南山区(7) linkage.setValues({ provinceId: '2', cityId: '4', areaId: '7' });

5. 常见问题排查与实战心得

5.1 问题一：选择省份后，城市下拉框没有选项或选项错误

排查思路：

检查数据源：首先确认mockData中是否存在pid为选中省份id的数据项。使用console.log(linkage.filterDataByPid(selectedProvinceId))打印筛选结果。
检查数据类型：JavaScript中'2'（字符串）和2（数字）是不相等的。确保在数据中pid和id的类型一致，在filterDataByPid方法中我们使用了String(item.pid) === String(pid)进行强制类型转换来避免此问题。
检查事件绑定：确认change事件是否成功绑定。可以在onProvinceChange方法开头添加console.log('province changed:', provinceId)来验证。

实操心得：在数据处理上，我习惯在初始化时就将所有ID统一转换为字符串类型，这样可以彻底避免因类型不一致导致的匹配失败。可以在constructor或setData方法中加入数据清洗步骤：

this.data = data.map(item => ({ id: String(item.id), pid: String(item.pid), name: item.name }));

5.2 问题二：联动过程中，下拉框出现闪烁或短暂显示不正确选项

原因分析：这通常是由于在清空旧选项和填充新选项之间，浏览器有一个短暂的重排/重绘过程。如果操作是同步且快速的，用户通常感知不到。但如果数据量很大或中间有复杂计算，就可能被察觉。

解决方案：使用文档片段（DocumentFragment）来优化DOM操作。DocumentFragment是一个轻量级的文档对象，可以在内存中操作DOM节点，然后一次性追加到真实DOM中，从而减少页面重排次数。

renderSelect(selectEl, dataList, placeholder = '请选择') { // 清空并设置禁用状态... selectEl.disabled = false; // 使用文档片段 const fragment = document.createDocumentFragment(); dataList.forEach(item => { const option = new Option(item.name, item.id); fragment.appendChild(option); }); selectEl.appendChild(fragment); // 一次性插入所有新选项 }

5.3 问题三：与异步数据结合时，组件初始化失败

场景描述：实际项目中，省市区数据往往通过AJAX从后端接口获取。如果直接在new TripleLinkage()时传入一个空数组，然后异步获取数据，组件初始化后无法工作。

解决方案：设计组件时，应支持动态更新数据。我们已经提供了setData方法。正确的使用流程应该是：

// 1. 先实例化，传入空数据或默认数据 const linkage = new TripleLinkage({ data: [], // 初始为空 provinceId: 'province', cityId: 'city', areaId: 'area' }); // 2. 异步获取数据 fetch('/api/region-data') .then(res => res.json()) .then(remoteData => { // 3. 获取到数据后，更新组件 linkage.setData(remoteData); }) .catch(err => { console.error('加载数据失败:', err); // 可以设置一个默认的本地数据作为降级方案 linkage.setData(fallbackData); });