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

省市区三级联动

article 2026/5/14 3:19:28

引言

在网页中，经常会遇到需要用户选择地区的场景，如注册表单、地址填写等。为了提供更好的用户体验，我们可以实现一个三级联动的地区选择器，让用户依次选择省份、城市和地区。

效果展示：

只有先选择省份后才可以选择市和区

实现思路

整体实现思路是通过 JavaScript 异步请求一个包含地区数据的 JSON 文件，将数据解析后根据用户的选择动态更新下拉框选项，最终实现三级联动效果。当用户完成地区选择后，会弹出一个提示框显示所选的地区信息，提示框会在 2 秒后自动消失。

HTML 结构搭建

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title></title><style>#showPlace {position: fixed;top: 0;left: 0;width: 100%;height: 100%;background-color: rgba(0, 0, 0, 0.7);color: white;align-items: center;z-index: 9999;text-align: center;line-height: 500px;display: none;}#textCenter {text-align: center;}#textCenter select {height: 50px;width: 200px;text-align: center;font-size: 20px;}</style>
</head>
<body><div id="textCenter"><select id="province" onchange="cityData()"><option>---请选择省---</option></select><select id="city" onchange="regionData()"><option>---请先选择省---</option></select><select id="region" onchange="showAlert()"><option>---请先选择省---</option></select></div><div id="showPlace"><h1>您所在的地区为：</h1></div><script>// ... JavaScript 代码 ...</script>
</body>

创建了三个 select 元素，分别用于选择省份、城市和地区，并为每个 select 元素设置了初始提示选项。
onchange 事件分别绑定了相应的 JavaScript 函数，用于在用户选择选项时更新下拉框内容或显示提示框。

JavaScript 逻辑实现

1.声明一个变量 data，用于存储从 ./js/threeGet.json 文件中获取的地区数据。此时变量未赋值，值为 undefined。

let data;

2. 这部分代码创建了一个 XMLHttpRequest 对象，以异步 GET 请求的方式从 ./js/threeGet.json 文件获取数据，发送请求后监听其状态变化，当请求完成且响应状态码为 200 时，将响应的 JSON 文本解析为 JavaScript 对象，随后调用 showProvince 函数对解析后的数据进行渲染处理。

			let xhr = new XMLHttpRequest();xhr.open('get', './js/threeGet.json', true);xhr.send();xhr.onreadystatechange = function() {if (xhr.readyState == 4 && xhr.status == 200) {let text = xhr.responseText;// console.log(text);data = JSON.parse(text);// console.log(data);// 渲染函数showProvince(data);// console.log(data);}};

3.分别通过 document.getElementById 方法获取 HTML 文档中 id 为 province、city、region 和 showPlace 的元素，并将它们存储在对应的变量中。

let province = document.getElementById('province');
let city = document.getElementById('city');
let region = document.getElementById('region');
let showPlace = document.getElementById('showPlace');

4.渲染省份函数：定义一个名为 showProvince 的函数，用于渲染省份下拉框的选项。初始化变量 provinceStr，并赋值为一个禁用且默认选中的 <option> 元素，作为提示信息。使用 for 循环遍历 data 数组，将每个省份的名称拼接成 <option> 元素字符串，并添加到 provinceStr 中。将拼接好的 option 元素字符串赋值给 province 下拉框的 innerHTML 属性，从而更新下拉框的选项。

function showProvince(data) {let provinceStr = `<option disabled selected>--请选择省份--</option>`;for (let i = 0; i < data.length; i++) {provinceStr += `<option >${data[i].province}</option>`;}province.innerHTML = provinceStr;
}

5.渲染市级函数：定义一个名为 cityData 的函数，该函数会在用户选择省份后触发（通过 onchange 事件）。初始化变量 cityStr 和 regionStr，分别用于存储城市和地区下拉框的选项字符串，并设置默认的提示信息。使用外层 for 循环遍历 data 数组，检查每个省份是否与用户选择的省份相同。如果找到匹配的省份，则使用内层 for 循环遍历该省份下的所有城市，并将城市名称拼接成 <option> 元素字符串，添加到 cityStr 中。最后，将 cityStr 赋值给 city 下拉框的 innerHTML 属性，更新城市下拉框的选项；将 regionStr 赋值给 region 下拉框的 innerHTML 属性，重置地区下拉框的选项为提示信息。

function cityData() {let cityStr = `<option value="" disabled selected>--请选择城市--</option>`;let regionStr = `<option value="" disabled selected>--请先选择城市后选择地区--</option>`;for (let i = 0; i < data.length; i++) {if (data[i].province == province.value) {for (let s = 0; s < data[i].child.length; s++) {cityStr += `<option>${ data[i].child[s].city}</option>`;}}}city.innerHTML = cityStr;region.innerHTML = regionStr;
}

6.渲染区级函数：定义一个名为 regionData 的函数，该函数会在用户选择城市后触发（通过 onchange 事件）。初始化变量 regionStr，用于存储地区下拉框的选项字符串，使用三层嵌套的 for 循环：外层 for 循环遍历 data 数组，找到用户选择的省份。第二层 for 循环遍历该省份下的所有城市，找到用户选择的城市。内层 for 循环遍历该城市下的所有地区，并将地区名称拼接成 <option> 元素字符串，添加到 regionStr 中。最后，将 regionStr 赋值给 region 下拉框的 innerHTML 属性，更新地区下拉框的选项。

function regionData() {let regionStr = `<option value="" disabled selected>--请选择地区--</option>`;for (let i = 0; i < data.length; i++) {if (data[i].province == province.value) {for (let s = 0; s < data[i].child.length; s++) {if (data[i].child[s].city == city.value) {for (let c = 0; c < data[i].child[s].child.length; c++) {regionStr += `<option>${data[i].child[s].child[c]}</option>`;}}}}}region.innerHTML = regionStr;
}

7.地区信息框：定义一个名为 showAlert 的函数，该函数会在用户选择地区后触发（通过 onchange 事件）。构建一个包含用户所选省份、城市和地区信息的 HTML 字符串 str，并将地区信息用红色显示。将 str 赋值给 showPlace 元素的 innerHTML 属性，更新提示框的内容。将 showPlace 样式设置为 "block"，显示出来。使用 setTimeout 函数设置一个定时器，在 2000 毫秒后将 showPlace 元素的样式设置为 "none"，隐藏起来。

function showAlert() {let str = `<h1>您所在的地区为：<span style="color: red;">${province.value} ${city.value} ${region.value}</span></h1>`;showPlace.innerHTML = str;showPlace.style.display = "block";setTimeout(function() {showPlace.style.display = "none";}, 2000)
}

省市区三级联动

引言

效果展示：

实现思路

HTML 结构搭建

JavaScript 逻辑实现

相关文章：

省市区三级联动

Mac安装Redis并设置launchd自启动

Fullcalendar @fullcalendar/react 样式错乱丢失问题和导致页面卡顿崩溃问题

dm8在Linux环境安装精简步骤说明(2024年12月更新版dm8)

Linux MySQL离线安装

S4 HANA更改Tax base Amount的字段控制

JVM堆空间

《深入解析：DOS检测的技术原理与方法》

PID如何调试，如何配置P,I,D值，如何适配pwm的定时器配置，如何给小车配电源

小马模拟器-第三方全街机游戏模拟器

Qwen2-VL：在任何分辨率下增强视觉语言模型对世界的感知（大型视觉模型核心技术分享）

微信小程序date picker的一些说明

MySQL 基础学习(2)： INSERT 操作

关于opensips的帮助命令的解释

新项目传到git步骤

【力扣每日一题】LeetCode 2412: 完成所有交易的初始最少钱数

【算法】递归型枚举与回溯剪枝初识

pytorch 多机多卡训练方法

InfiniBand客户端注册机制详解：ib_register_client函数的作用与实现

rocketmq-product-send方法源码分析

centos下设置服务器开机自启动 redis

【Linux】APT 密钥管理：官方推荐的解决方案应对 apt-key 弃用

69.在 Vue 3 中使用 OpenLayers 拖拽实现放大区域的效果（DragPan）

77，【1】.[CISCN2019 华东南赛区]Web4

手撕B-树

SQL 指南

一文简单回顾复习Java基础概念

Git上传了秘钥如何彻底修改包括历史记录【从安装到实战详细版】

GCC之编译(8)AR打包命令

Linux二进制部署K8s集群的平滑升级教程