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

省市区三级联动

news 2026/2/9 16:34:04

引言

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

效果展示：

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

实现思路

整体实现思路是通过 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)
}

相关文章：

省市区三级联动

引言 在网页中&#xff0c;经常会遇到需要用户选择地区的场景&#xff0c;如注册表单、地址填写等。为了提供更好的用户体验&#xff0c;我们可以实现一个三级联动的地区选择器&#xff0c;让用户依次选择省份、城市和地区。 效果展示&#xff1a; 只有先选择省份后才可以选择…...

编程日记 2025/1/28 14:42:07

springboot 动态配置定时任务

要在Spring Boot中动态配置定时任务&#xff0c;可以使用ScheduledTaskRegistrar类来实现。 首先&#xff0c;创建一个定时任务类&#xff0c;该类需要实现Runnable接口。例如&#xff1a; Component public class MyTask implements Runnable {Overridepublic void run() {/…...

编程日记 2025/1/28 14:41:06

数据结构与算法学习笔记----求组合数

数据结构与算法学习笔记----求组合数 author: 明月清了个风 first publish time: 2025.1.27 ps⭐️一组求组合数的模版题&#xff0c;因为数据范围的不同要用不同的方法进行求解&#xff0c;涉及了很多之前的东西快速幂&#xff0c;逆元&#xff0c;质数&#xff0c;高精度等…...

编程日记 2025/1/28 14:36:01

Arouter详解・常见面试题

前言&#xff1a;ARouter是一个用于 Android App 进行组件化改造的路由框架 —— 支持模块间的路由、通信、解耦。 一、路由简介&#xff1a; 路由&#xff1a;就是通过互联的网络把信息从源地址传输到目的地址的活动。完成路由这个操作的实体设备就是 路由器&#xff08;Rout…...

编程日记 2025/1/28 14:32:57

全志开发板 视频输入框架

笔记来源于百问网出品的教程。 1.VIN camera驱动框架 • 使用过程中可简单的看成是vin 模块 device 模块af driver flash 控制模块的方式&#xff1b; • vin.c 是驱动的主要功能实现&#xff0c;包括注册/注销、参数读取、与v4l2 上层接口、与各device 的下层接口、中断处…...

编程日记 2025/1/28 14:29:49

寒假学web--day10

简介 一些高级的反序列化 phar反序列化 phar类似于java的jar包&#xff0c;将多个php文件合并为独立的压缩包&#xff0c;不用解压就能执行里面的php文件&#xff0c;支持web服务器和命令行 metadata $phar->setmetadata($h); metadata可以存放一个类实例&#xff0c;…...

编程日记 2025/1/28 14:28:47

【全栈】SprintBoot+vue3迷你商城（9）

【全栈】SprintBootvue3迷你商城&#xff08;9&#xff09; 往期的文章都在这里啦&#xff0c;大家有兴趣可以看一下 后端部分&#xff1a; 【全栈】SprintBootvue3迷你商城&#xff08;1&#xff09; 【全栈】SprintBootvue3迷你商城&#xff08;2&#xff09; 【全栈】Spr…...

编程日记 2025/1/28 14:27:39

系统思考—问题分析

很多中小企业都在面对转型的难题&#xff1a;市场变化快&#xff0c;资源有限&#xff0c;团队协作不畅……这些问题似乎总是困扰着我们。就像最近和一位企业主交流时&#xff0c;他提到&#xff1a;“我们团队每天都很忙&#xff0c;但效率始终没见提升&#xff0c;感觉像是在…...

编程日记 2025/1/28 14:26:35

系统架构设计师教材：信息系统及信息安全

信息系统 信息系统的5个基本功能&#xff1a;输入、存储、处理、输出和控制。信息系统的生命周期分为4个阶段&#xff0c;即产生阶段、开发阶段、运行阶段和消亡阶段。 信息系统建设原则 1. 高层管理人员介入原则&#xff1a;只有高层管理人员才能知道企业究竟需要什么样的信…...

编程日记 2025/1/28 14:24:26

美国三种主要的个人数据产业模式简析

文章目录 前言一、个人征信（Credit Reporting）模式1、定义：2、特点：数据来源：核心功能：服务对象：代表性公司：监管框架：示例应用：二、面向垂直场景的个人数据公司（Consumer Reporting，消费者报告模式）1、定义：2、特点：数据来源：核心功能：服务对象：主要公司：监…...

编程日记 2025/1/28 14:21:20

js手撕 | 使用css画一个三角形 使用js修改元素样式 驼峰格式与“-”格式相互转化

1.使用css画一个三角形 借助 border 实现&#xff0c;在 width 和 height 都为 0 时&#xff0c;设置 border&#xff0c;便会呈现三角形。想要哪个方向的三角形&#xff0c;设置其他三边为 透明即可。同时&#xff0c;可以通过调整不同边的宽度&#xff0c;来调整三角形的高度…...

编程日记 2025/1/28 14:19:16

每日一道算法题

题目&#xff1a;最长递增子序列的个数 给定一个未排序的整数数组&#xff0c;找到最长递增子序列的个数。 示例 1 输入&#xff1a;nums [1,3,5,4,7]输出&#xff1a;2解释&#xff1a;有两个最长递增子序列&#xff0c;分别是 [1,3,4,7] 和 [1,3,5,7] 。 示例 2 输入&a…...

编程日记 2025/1/28 14:18:12

低代码系统-产品架构案例介绍、明道云（十一）

明道云HAP-超级应用平台(Hyper Application Platform)&#xff0c;其实就是企业级应用平台&#xff0c;跟微搭类似。 通过自设计底层架构&#xff0c;兼容各种平台&#xff0c;使用低代码做到应用搭建、应用运维。 企业级应用平台最大的特点就是隐藏在冰山下的功能很深&#xf…...

编程日记 2025/1/28 14:17:10

论文笔记（六十三）Understanding Diffusion Models: A Unified Perspective（三）

Understanding Diffusion Models: A Unified Perspective&#xff08;三&#xff09; 文章概括 文章概括 引用&#xff1a; article{luo2022understanding,title{Understanding diffusion models: A unified perspective},author{Luo, Calvin},journal{arXiv preprint arXiv:…...

编程日记 2025/1/28 14:15:57

利用机器学习创建基于位置的推荐程序

推荐系统被广泛应用于不同的应用程序中&#xff0c;用于预测用户对产品或服务的偏好或评价。在过去的几分钟或几小时里&#xff0c;你很可能在网上遇到过或与某种类型的推荐系统进行过互动。这些推荐系统有不同的类型&#xff0c;其中最突出的包括基于内容的过滤和协作过滤。在…...

编程日记 2025/1/28 14:07:39

每日一题 429. N 叉树的层序遍历

429. N 叉树的层序遍历 /*class Solution { public:vector<vector<int>> levelOrder(Node* root) {queue<Node*> que;que.push(root);vector<vector<int>> ans;if(root nullptr){return ans;}while(!que.empty()){int sizeQue que.size();vec…...

编程日记 2025/1/28 14:06:23

AIP-132 标准方法：List

编号132原文链接AIP-132: Standard methods: List状态批准创建日期2019-01-21更新日期2022-06-02 在许多API中&#xff0c;通常会向集合URI&#xff08;例如 /v1/publishers/1/books &#xff09;发出GET请求&#xff0c;获取集合中资源的列表。 面向资源设计&#xff08;AIP…...

编程日记 2025/1/28 14:05:11

CSAPP学习：前言

前言 本书简称CS&#xff1a;APP。 背景知识 一些基础的C语言知识 如何阅读 Do-做系统 在真正的系统上解决具体的问题&#xff0c;或是编写和运行程序。 章节 2025-1-27 个人认为如下章节将会对学习408中的操作系统与计算机组成原理提供帮助&#xff0c;于是先凭借记忆将其简单…...

编程日记 2025/1/28 14:02:58

【统计的思想】假设检验（二）

假设检验是根据人为设定的显著水平&#xff0c;对被测对象的总体质量特性进行统计推断的方法。 如果我们通过假设检验否定了零假设&#xff0c;只是说明在设定的显著水平下&#xff0c;零假设成立的概率比较小&#xff0c;并不是说零假设就肯定不成立。如果零假设事实上是成立…...

编程日记 2025/1/28 13:59:48

KNN算法学习实践

1.理论学习 原文链接 ShowMeAI知识社区 2.案例实践 假如一套房子打算出租&#xff0c;但不知道市场价格&#xff0c;可以根据房子的规格&#xff08;面积、房间数量、厕所数量、容纳人数等&#xff09;&#xff0c;在已有数据集中查找相似&#xff08;K近邻&#xff09;规格…...

编程日记 2025/1/28 13:58:47

利用最小二乘法找圆心和半径

#include <iostream> #include <vector> #include <cmath> #include <Eigen/Dense> // 需安装Eigen库用于矩阵运算 // 定义点结构 struct Point { double x, y; Point(double x_, double y_) : x(x_), y(y_) {} }; // 最小二乘法求圆心和半径 …...

编程新知 2026/2/8 4:37:37

7.4.分块查找

一.分块查找的算法思想&#xff1a; 1.实例&#xff1a; 以上述图片的顺序表为例&#xff0c; 该顺序表的数据元素从整体来看是乱序的&#xff0c;但如果把这些数据元素分成一块一块的小区间&#xff0c; 第一个区间[0,1]索引上的数据元素都是小于等于10的&#xff0c; 第二…...

编程新知 2026/2/8 20:43:02

day52 ResNet18 CBAM

在深度学习的旅程中&#xff0c;我们不断探索如何提升模型的性能。今天&#xff0c;我将分享我在 ResNet18 模型中插入 CBAM&#xff08;Convolutional Block Attention Module&#xff09;模块&#xff0c;并采用分阶段微调策略的实践过程。通过这个过程&#xff0c;我不仅提升…...

编程新知 2025/11/9 1:27:18

大语言模型如何处理长文本？常用文本分割技术详解

为什么需要文本分割？ 引言：为什么需要文本分割？一、基础文本分割方法1. 按段落分割（Paragraph Splitting）2. 按句子分割（Sentence Splitting）二、高级文本分割策略3. 重叠分割（Sliding Window）4. 递归分割（Recursive Splitting）三、生产级工具推荐5. 使用LangChain的…...

编程新知 2025/11/18 0:32:13

在 Nginx Stream 层“改写”MQTT ngx_stream_mqtt_filter_module

1、为什么要修改 CONNECT 报文&#xff1f; 多租户隔离&#xff1a;自动为接入设备追加租户前缀&#xff0c;后端按 ClientID 拆分队列。零代码鉴权&#xff1a;将入站用户名替换为 OAuth Access-Token&#xff0c;后端 Broker 统一校验。灰度发布&#xff1a;根据 IP/地理位写…...

编程新知 2025/8/1 10:20:23

Map相关知识

数据结构 二叉树 二叉树&#xff0c;顾名思义&#xff0c;每个节点最多有两个“叉”&#xff0c;也就是两个子节点&#xff0c;分别是左子 节点和右子节点。不过&#xff0c;二叉树并不要求每个节点都有两个子节点&#xff0c;有的节点只 有左子节点&#xff0c;有的节点只有…...

编程新知 2026/2/4 16:21:14

html css js网页制作成品——HTML+CSS榴莲商城网页设计（4页）附源码

目录 一、&#x1f468;‍&#x1f393;网站题目 二、✍️网站描述 三、&#x1f4da;网站介绍 四、&#x1f310;网站效果 五、&#x1fa93; 代码实现 &#x1f9f1;HTML 六、&#x1f947; 如何让学习不再盲目 七、&#x1f381;更多干货 一、&#x1f468;‍&#x1f…...

编程新知 2026/2/7 22:17:30

如何更改默认 Crontab 编辑器 ？

在 Linux 领域中&#xff0c;crontab 是您可能经常遇到的一个术语。这个实用程序在类 unix 操作系统上可用&#xff0c;用于调度在预定义时间和间隔自动执行的任务。这对管理员和高级用户非常有益&#xff0c;允许他们自动执行各种系统任务。 编辑 Crontab 文件通常使用文本编…...

编程新知 2026/1/30 3:27:35

android13 app的触摸问题定位分析流程

一、知识点 一般来说，触摸问题都是app层面出问题，我们可以在ViewRootImpl.java添加log的方式定位；如果是touchableRegion的计算问题，就会相对比较麻烦了，需要通过adb shell dumpsys input > input.log指令，且通过打印堆栈的方式，逐步定位问题，并找到修改方案。 问题…...

编程新知 2026/1/31 13:18:31

HubSpot推出与ChatGPT的深度集成引发兴奋与担忧

上周三&#xff0c;HubSpot宣布已构建与ChatGPT的深度集成&#xff0c;这一消息在HubSpot用户和营销技术观察者中引发了极大的兴奋&#xff0c;但同时也存在一些关于数据安全的担忧。 许多网络声音声称&#xff0c;这对SaaS应用程序和人工智能而言是一场范式转变。 但向任何技…...

编程新知 2026/2/6 4:24:06