JS实现省市区三级联动（json假数据）

作者： 分类：所有,javascript 字数：15483

'# JS实现省市区三级联动（json假数据）

一、背景与问题

在Web开发中，省市区三级联动是常见的表单交互需求。这种场景要求用户选择省份后，自动加载对应的城市列表；选择城市后，自动加载对应的区县列表。传统的实现方式需要处理复杂的DOM操作和数据过滤，容易出现性能瓶颈。

核心挑战包括：

  1. 如何高效管理多层级嵌套数据
  2. 如何实现动态数据加载的响应式更新
  3. 如何处理数据结构的层级关系
  4. 如何保证用户体验的流畅性

二、基本原理

省市区联动的本质是数据层级关系的动态展示。核心实现包含三个关键步骤：

  1. 数据结构处理：将扁平化的JSON数据转换为可遍历的树形结构
  2. 事件绑定：监听省份/城市选择事件
  3. 动态渲染：根据当前选择值过滤并渲染下一级数据

典型数据结构示例：

{
  "province": [
    {
      "id": 1,
      "name": "北京市",
      "city": [
        {
          "id": 11,
          "name": "北京市",
          "district": [
            {"id": 111, "name": "东城区"},
            {"id": 112, "name": "西城区"}
          ]
        }
      ]
    }
  ]
}

三、环境准备

  1. 前端技术栈：HTML5 + CSS3 + JavaScript
  2. 数据结构：使用扁平化JSON模拟真实数据
  3. 开发工具：VS Code + Chrome浏览器
  4. 依赖库：无特殊依赖（纯JS实现）

四、核心实现

1. 基础实现（纯JS）

<!DOCTYPE html>
<html>
<head>
  <title>省市区联动</title>
</head>
<body>
  <select id="province"></select>
  <select id="city"></select>
  <select id="district"></select>

  <script>
    // 模拟数据
    const data = [
      {
        id: 1,
        name: "北京市",
        children: [
          {
            id: 11,
            name: "北京市",
            children: [
              { id: 111, name: "东城区" },
              { id: 112, name: "西城区" }
            ]
          }
        ]
      },
      {
        id: 2,
        name: "广东省",
        children: [
          {
            id: 21,
            name: "广州市",
            children: [
              { id: 211, name: "越秀区" },
              { id: 212, name: "天河区" }
            ]
          }
        ]
      }
    ];

    // 构建树形结构
    function buildTree(data) {
      const tree = [];
      const map = {};
      
      data.forEach(item => {
        if (!item.children) {
          item.children = [];
        }
        map[item.id] = item;
        tree.push(item);
      });
      
      for (const id in map) {
        const parent = map[id];
        if (parent.parentId) {
          map[parent.parentId].children.push(parent);
        }
      }
      
      return tree;
    }

    // 初始化数据
    const treeData = buildTree(data);

    // 渲染下拉框
    function renderSelect(select, options, parentId = 0) {
      select.innerHTML = '<option value="">请选择</option>';
      options.forEach(option => {
        const optionElement = document.createElement('option');
        optionElement.value = option.id;
        optionElement.textContent = option.name;
        if (parentId === option.id) {
          optionElement.selected = true;
        }
        select.appendChild(optionElement);
      });
    }

    // 事件处理
    function handleSelectChange() {
      const provinceSelect = document.getElementById('province');
      const citySelect = document.getElementById('city');
      const districtSelect = document.getElementById('district');
      
      const provinceId = parseInt(provinceSelect.value);
      const cityId = parseInt(citySelect.value);
      
      // 清空下级选择
      citySelect.innerHTML = '<option value="">请选择</option>';
      districtSelect.innerHTML = '<option value="">请选择</option>';
      
      // 获取城市数据
      const cities = treeData
        .find(province => province.id === provinceId)
        ?.children || [];
      
      // 渲染城市
      renderSelect(citySelect, cities);
      
      // 城市选择变化时
      citySelect.addEventListener('change', () => {
        const cityId = parseInt(citySelect.value);
        const districts = cities
          .find(city => city.id === cityId)
          ?.children || [];
        
        renderSelect(districtSelect, districts);
      });
    }

    // 初始化
    renderSelect(document.getElementById('province'), treeData);
    handleSelectChange();
  </script>
</body>
</html>

关键代码解释：

  1. buildTree函数将扁平数据转换为树形结构，通过parentId建立层级关系
  2. renderSelect函数负责渲染下拉框，处理默认选项和选中状态
  3. handleSelectChange处理省份变化事件，动态加载城市数据
  4. 使用事件委托处理城市选择变化，避免重复绑定

2. 基于Vue的组件化实现

<template>
  <div>
    <select v-model="selectedProvince" @change="handleProvinceChange">
      <option value="">请选择省份</option>
      <option v-for="province in provinces" :key="province.id" :value="province.id">
        {{ province.name }}
      </option>
    </select>

    <select v-model="selectedCity" @change="handleCityChange">
      <option value="">请选择城市</option>
      <option v-for="city in cities" :key="city.id" :value="city.id">
        {{ city.name }}
      </option>
    </select>

    <select v-model="selectedDistrict">
      <option value="">请选择区县</option>
      <option v-for="district in districts" :key="district.id" :value="district.id">
        {{ district.name }}
      </option>
    </select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      provinces: [],
      cities: [],
      districts: [],
      selectedProvince: '',
      selectedCity: '',
      selectedDistrict: ''
    };
  },
  mounted() {
    this.initData();
  },
  methods: {
    initData() {
      // 模拟数据
      this.provinces = [
        { id: 1, name: "北京市", children: [
          { id: 11, name: "北京市", children: [
            { id: 111, name: "东城区" },
            { id: 112, name: "西城区" }
          ] }
        ] },
        { id: 2, name: "广东省", children: [
          { id: 21, name: "广州市", children: [
            { id: 211, name: "越秀区" },
            { id: 212, name: "天河区" }
          ] }
        ] }
      ];
    },
    handleProvinceChange() {
      const selectedId = this.selectedProvince;
      const province = this.provinces.find(p => p.id === selectedId);
      if (province && province.children) {
        this.cities = province.children;
        this.selectedCity = '';
        this.districts = [];
      }
    },
    handleCityChange() {
      const selectedId = this.selectedCity;
      const city = this.cities.find(c => c.id === selectedId);
      if (city && city.children) {
        this.districts = city.children;
        this.selectedDistrict = '';
      }
    }
  }
};
</script>

关键改进点：

  1. 使用Vue的响应式系统自动更新视图
  2. 通过组件化实现更好的代码组织
  3. 使用数据绑定简化事件处理
  4. 更清晰的业务逻辑分层

3. 基于React的函数组件实现

import React, { useState, useEffect } from 'react';

function ProvinceCityDistrict() {
  const [provinces, setProvinces] = useState([]);
  const [cities, setCities] = useState([]);
  const [districts, setDistricts] = useState([]);
  const [selectedProvince, setSelectedProvince] = useState('');
  const [selectedCity, setSelectedCity] = useState('');
  const [selectedDistrict, setSelectedDistrict] = useState('');

  useEffect(() => {
    // 模拟数据
    setProvinces([
      { id: 1, name: "北京市", children: [
        { id: 11, name: "北京市", children: [
          { id: 111, name: "东城区" },
          { id: 112, name: "西城区" }
        ] }
      ] },
      { id: 2, name: "广东省", children: [
        { id: 21, name: "广州市", children: [
          { id: 211, name: "越秀区" },
          { id: 212, name: "天河区" }
        ] }
      ] }
    ]);
  }, []);

  const handleProvinceChange = (e) => {
    const selectedId = e.target.value;
    setSelectedProvince(selectedId);
    setSelectedCity('');
    setSelectedDistrict('');
    
    const province = provinces.find(p => p.id === parseInt(selectedId));
    if (province && province.children) {
      setCities(province.children);
    } else {
      setCities([]);
    }
  };

  const handleCityChange = (e) => {
    const selectedId = e.target.value;
    setSelectedCity(selectedId);
    setSelectedDistrict('');
    
    const city = cities.find(c => c.id === parseInt(selectedId));
    if (city && city.children) {
      setDistricts(city.children);
    } else {
      setDistricts([]);
    }
  };

  return (
    <div>
      <select value={selectedProvince} onChange={handleProvinceChange}>
        <option value="">请选择省份</option>
        {provinces.map(province => (
          <option key={province.id} value={province.id}>
            {province.name}
          </option>
        ))}
      </select>

      <select value={selectedCity} onChange={handleCityChange}>
        <option value="">请选择城市</option>
        {cities.map(city => (
          <option key={city.id} value={city.id}>
            {city.name}
          </option>
        ))}
      </select>

      <select value={selectedDistrict}>
        <option value="">请选择区县</option>
        {districts.map(district => (
          <option key={district.id} value={district.id}>
            {district.name}
          </option>
        ))}
      </select>
    </div>
  );
}

export default ProvinceCityDistrict;

关键改进点：

  1. 使用React的useState和useEffect管理状态
  2. 更清晰的函数组件组织方式
  3. 使用函数式组件提升可维护性
  4. 更好的类型控制（可结合TypeScript）

五、完整案例

创建一个完整的注册表单，包含省市区联动：

<!DOCTYPE html>
<html>
<head>
  <title>注册表单</title>
</head>
<body>
  <form id="registerForm">
    <label for="province">省份:</label>
    <select id="province" name="province"></select>
    
    <label for="city">城市:</label>
    <select id="city" name="city"></select>
    
    <label for="district">区县:</label>
    <select id="district" name="district"></select>
    
    <button type="submit">注册</button>
  </form>

  <script>
    // 模拟数据
    const data = [
      {
        id: 1,
        name: "北京市",
        children: [
          {
            id: 11,
            name: "北京市",
            children: [
              { id: 111, name: "东城区" },
              { id: 112, name: "西城区" }
            ]
          }
        ]
      },
      {
        id: 2,
        name: "广东省",
        children: [
          {
            id: 21,
            name: "广州市",
            children: [
              { id: 211, name: "越秀区" },
              { id: 212, name: "天河区" }
            ]
          }
        ]
      }
    ];

    // 构建树形结构
    function buildTree(data) {
      const tree = [];
      const map = {};
      
      data.forEach(item => {
        if (!item.children) {
          item.children = [];
        }
        map[item.id] = item;
        tree.push(item);
      });
      
      for (const id in map) {
        const parent = map[id];
        if (parent.parentId) {
          map[parent.parentId].children.push(parent);
        }
      }
      
      return tree;
    }

    const treeData = buildTree(data);

    // 渲染下拉框
    function renderSelect(select, options, parentId = 0) {
      select.innerHTML = '<option value="">请选择</option>';
      options.forEach(option => {
        const optionElement = document.createElement('option');
        optionElement.value = option.id;
        optionElement.textContent = option.name;
        if (parentId === option.id) {
          optionElement.selected = true;
        }
        select.appendChild(optionElement);
      });
    }

    // 事件处理
    function handleSelectChange() {
      const provinceSelect = document.getElementById('province');
      const citySelect = document.getElementById('city');
      const districtSelect = document.getElementById('district');
      
      const provinceId = parseInt(provinceSelect.value);
      const cityId = parseInt(citySelect.value);
      
      // 清空下级选择
      citySelect.innerHTML = '<option value="">请选择</option>';
      districtSelect.innerHTML = '<option value="">请选择</option>';
      
      // 获取城市数据
      const cities = treeData
        .find(province => province.id === provinceId)
        ?.children || [];
      
      // 渲染城市
      renderSelect(citySelect, cities);
      
      // 城市选择变化时
      citySelect.addEventListener('change', () => {
        const cityId = parseInt(citySelect.value);
        const districts = cities
          .find(city => city.id === cityId)
          ?.children || [];
        
        renderSelect(districtSelect, districts);
      });
    }

    // 初始化
    renderSelect(document.getElementById('province'), treeData);
    handleSelectChange();

    // 表单提交处理
    document.getElementById('registerForm').addEventListener('submit', (e) => {
      e.preventDefault();
      const province = document.getElementById('province').value;
      const city = document.getElementById('city').value;
      const district = document.getElementById('district').value;
      
      alert(`注册成功！省份:${province}, 城市:${city}, 区县:${district}`);
    });
  </script>
</body>
</html>

完整案例特点：

  1. 包含完整的表单提交逻辑
  2. 使用了完整的数据结构和事件处理
  3. 可直接复制运行测试
  4. 包含错误处理和提示信息

六、源码解析

  1. 数据结构处理：

    • 使用parentId建立层级关系
    • 构建树形结构便于快速查找
    • 确保每个节点都包含children属性

  2. 渲染逻辑：

    • 使用递归思想构建下拉框选项
    • 通过value属性绑定选中状态
    • 使用事件委托避免重复绑定

  3. 事件处理：

    • 使用change事件驱动数据更新
    • 通过DOM操作动态更新下拉框
    • 确保每次选择后重新渲染下级数据

七、进阶使用

  1. 增加搜索功能：

    function searchSelect(select, options, keyword) {
  select.innerHTML = '<option value="">请选择</option>';
  options.filter(option => 
    option.name.toLowerCase().includes(keyword.toLowerCase())
  ).forEach(option => {
    const optionElement = document.createElement('option');
    optionElement.value = option.id;
    optionElement.textContent = option.name;
    select.appendChild(optionElement);
  });
}

  2. 增加数据缓存：

    const cache = {};
function getCachedData(id) {
  if (cache[id]) return cache[id];
  // 模拟从后端获取数据
  return new Promise(resolve => {
    setTimeout(() => resolve({
      id: id,
      name: `数据-${id}`,
      children: []
    }), 100);
  });
}

  3. 增加错误处理：

    try {
  const data = await fetchData();
  if (!data) throw new Error('数据获取失败');
} catch (error) {
  console.error(error);
  alert('数据获取失败，请重试');
}

八、性能与工程实践

1. 性能优化

  • 使用虚拟滚动技术：对于大量数据（如5000+条记录）时，避免一次性渲染所有选项
  • 使用懒加载：在用户滚动时才加载下级数据
  • 使用防抖技术：避免频繁触发事件处理函数
  • 使用缓存策略：对频繁访问的数据进行缓存

2. 异常处理

  • 处理空值情况：确保数据结构完整
  • 处理无效输入：验证用户选择的合法性
  • 处理网络错误：在使用AJAX获取数据时添加错误处理

3. 安全考虑

  • 输入过滤：防止XSS攻击
  • 数据验证：确保选择的数据格式正确
  • 权限控制：在涉及敏感数据时添加权限校验

4. 工程实践

  • 使用模块化设计：将不同功能拆分为独立模块
  • 使用TypeScript增强类型安全
  • 使用单元测试：确保核心逻辑的正确性
  • 使用代码规范：遵循Airbnb或Google的JS规范

九、常见问题与踩坑

1. 常见错误

错误示例：

function renderSelect(select, options) {
  select.innerHTML = '';
  options.forEach(option => {
    const optionElement = document.createElement('option');
    optionElement.value = option.id;
    optionElement.textContent = option.name;
    select.appendChild(optionElement);
  });
}

问题分析：

  • 没有处理初始状态的默认选项
  • 没有处理选中状态
  • 没有处理事件绑定

改进方案：

function renderSelect(select, options, parentId = 0) {
  select.innerHTML = '<option value="">请选择</option>';
  options.forEach(option => {
    const optionElement = document.createElement('option');
    optionElement.value = option.id;
    optionElement.textContent = option.name;
    if (parentId === option.id) {
      optionElement.selected = true;
    }
    select.appendChild(optionElement);
  });
}

2. 常见坑点

  • 数据结构不一致：省、市、区的parentId字段不一致
  • 事件绑定失效：在动态创建元素时未绑定事件
  • 性能问题：频繁的DOM操作导致页面卡顿
  • 数据缓存失效：未处理缓存过期问题
  • 跨域问题：使用AJAX获取数据时未处理跨域

十、最佳实践

  1. 数据结构设计：

    • 保持统一的parentId字段
    • 确保每个节点都包含children属性
    • 使用树形结构便于快速查找

  2. 事件处理：

    • 使用事件委托避免重复绑定
    • 在动态创建元素时绑定事件
    • 使用防抖技术优化频繁触发的事件

  3. 性能优化：

    • 使用虚拟滚动技术处理大数据
    • 使用懒加载按需加载数据
    • 对频繁访问的数据进行缓存
    • 使用Web Workers处理复杂计算

  4. 安全措施：

    • 对用户输入进行过滤
    • 验证数据格式
    • 处理可能的XSS攻击
    • 对敏感操作添加权限校验

  5. 代码规范：

    • 使用模块化设计
    • 使用TypeScript增强类型安全
    • 遵循Airbnb的JS规范
    • 添加详细的注释

十一、总结

省市区三级联动是Web开发中常见的交互需求，其核心在于处理多层级数据的动态展示。本文深入探讨了实现原理，提供了三种不同的实现方式（纯JS、Vue、React），并给出了完整的案例。通过分析常见错误和性能优化方案，帮助开发者避免常见陷阱。

在实际开发中，应根据项目需求选择合适的实现方式。对于小型项目，纯JS实现足够；对于中大型项目，建议使用Vue或React进行组件化开发。同时，需要注意数据结构设计、事件处理、性能优化和安全措施，确保系统的健壮性和可维护性。

在处理大数据量时，应考虑虚拟滚动、懒加载等优化策略；在涉及敏感数据时，应添加相应的安全校验。通过合理的架构设计和代码规范，可以确保省市区联动功能在各种场景下都能稳定运行。

评论已关闭

推荐阅读

AIGC实战——Transformer模型
2024年12月01日
python , AI , 机器学习
Socket TCP 和 UDP 编程基础（Python）
2024年11月30日
python , tcp , udp
如何使用 ChatGPT 进行学术润色？你需要这些指令
2024年12月01日
AI
最新 Python 调用 OpenAi 详细教程实现问答、图像合成、图像理解、语音合成、语音识别（详细教程）
2024年11月24日
python , AI
ChatGPT 和 DALL·E 2 配合生成故事绘本
2024年12月01日
python , AI
omegaconf，一个超强的 Python 库！
2024年11月24日
python
【视觉AIGC识别】误差特征、人脸伪造检测、其他类型假图检测
2024年12月01日
python , AI
［超级详细］如何在深度学习训练模型过程中使用 GPU 加速
2024年11月29日
python , AI , 机器学习
Python 物理引擎pymunk最完整教程
2024年11月27日
python
MediaPipe 人体姿态与手指关键点检测教程
2024年11月27日
python
深入了解 Taipy：Python 打造 Web 应用的全面教程
2024年11月26日
python
基于Transformer的时间序列预测模型
2024年11月25日
python , Matplotlib , 机器学习
Python在金融大数据分析中的AI应用（股价分析、量化交易）实战
2024年11月25日
python , Matplotlib , 机器学习
AIGC Gradio系列学习教程之Components
2024年12月01日
python , AI
Python3 `asyncio` — 异步 I/O，事件循环和并发工具
2024年11月30日
python
llama-factory SFT系列教程：大模型在自定义数据集 LoRA 训练与部署
2024年12月01日
python , AI , 机器学习
Python 多线程和多进程用法
2024年11月24日
python
Python socket详解，全网最全教程
2024年11月27日
python , http , websocket
python之plot()和subplot()画图
2024年11月26日
python , Matplotlib
理解 DALL·E 2、Stable Diffusion 和 Midjourney 工作原理
2024年12月01日
python , AI , 机器学习
Copyright © 2026 Tech Blog
All Right Reserved | 京ICP备19053165号