JS实现省市区三级联动(json假数据)

省市级三级联动通常指的是在用户界面上,用户可以通过选择省份,然后基于所选择的省份选择对应的城市,最后基于所选择的城市选择对应的区县。这种联动效果在很多应用中都有出现,例如电商平台的收货地址选择、政务服务的地区选择等。

下面是一个使用JSON假数据实现省市级三级联动功能的示例。

JSON假数据
首先,我们需要构造一组包含省份、城市和区县信息的JSON假数据。

json
{  "provinces": [  {  "id": 1,  "name": "广东省",  "cities": [  {  "id": 1,  "name": "广州市",  "districts": [  {  "id": 1,  "name": "天河区"  },  {  "id": 2,  "name": "越秀区"  }  ]  },  {  "id": 2,  "name": "深圳市",  "districts": [  {  "id": 3,  "name": "福田区"  },  {  "id": 4,  "name": "南山区"  }  ]  }  ]  },  {  "id": 2,  "name": "浙江省",  "cities": [  {  "id": 3,  "name": "杭州市",  "districts": [  {  "id": 5,  "name": "西湖区"  },  {  "id": 6,  "name": "拱墅区"  }  ]  }  ]  }  ]  
}

具体代码与思路
1. 数据准备
将上述JSON数据保存在一个文件中,例如areas.json,然后在前端代码中通过AJAX请求或其他方式加载这个数据。

2. 前端页面结构
通常,我们会使用三个<select>元素来表示省份、城市和区县的选择框。

html
<select id="province"></select>  
<select id="city"></select>  
<select id="district"></select>

3. 初始化与数据绑定
当页面加载时,首先加载JSON数据。
根据加载的数据,动态生成省份的<option>元素,并绑定到省份的<select>元素上。
为省份的<select>元素添加change事件监听器,当用户选择省份时,根据所选省份动态生成城市的<option>元素,并绑定到城市的<select>元素上。
同样地,为城市的<select>元素添加change事件监听器,当用户选择城市时,根据所选城市动态生成区县的<option>元素,并绑定到区县的<select>元素上。
4. 示例代码(使用jQuery)
这里是一个使用jQuery实现的简单示例:

javascript
const data = {  "provinces": [  { "id": 1, "name": "省份1", "cities": [  { "id": 11, "name": "城市1", "districts": [  { "id": 111, "name": "区县1" },  { "id": 112, "name": "区县2" }  ] },  { "id": 12, "name": "城市2", "districts": [  { "id": 121, "name": "区县3" },  { "id": 122, "name": "区县4" }  ] }  ] },  { "id": 2, "name": "省份2", "cities": [ /* ... */ ] }  ]  
};
HTML 结构
接下来,我们需要在 HTML 中创建三个下拉框,分别用于选择省份、城市和区县。html
<select id="province"></select>  
<select id="city"></select>  
<select id="district"></select>
JavaScript 代码
现在,我们编写 JavaScript 代码来填充这些下拉框,并实现联动效果。javascript
// 填充省份下拉框  
const provinceSelect = document.getElementById('province');  
data.provinces.forEach(province => {  const option = document.createElement('option');  option.value = province.id;  option.text = province.name;  provinceSelect.appendChild(option);  
});  // 监听省份下拉框的变化,并更新城市和区县下拉框  
provinceSelect.addEventListener('change', function() {  const selectedProvinceId = this.value;  const selectedProvince = data.provinces.find(p => p.id === parseInt(selectedProvinceId));  updateCitySelect(selectedProvince.cities);  clearDistrictSelect();  
});  // 填充城市下拉框  
function updateCitySelect(cities) {  const citySelect = document.getElementById('city');  citySelect.innerHTML = ''; // 清空之前的选项  cities.forEach(city => {  const option = document.createElement('option');  option.value = city.id;  option.text = city.name;  citySelect.appendChild(option);  });  // 触发一次城市下拉框的变化,以更新区县下拉框(如果已经有默认选中的城市)  if (citySelect.options.length > 0) {  citySelect.dispatchEvent(new Event('change'));  }  
}  // 监听城市下拉框的变化,并更新区县下拉框  
const citySelect = document.getElementById('city');  
citySelect.addEventListener('change', function() {  const selectedCityId = this.value;  const selectedProvinceId = provinceSelect.value;  const selectedProvince = data.provinces.find(p => p.id === parseInt(selectedProvinceId));  const selectedCity = selectedProvince.cities.find(c => c.id === parseInt(selectedCityId));  updateDistrictSelect(selectedCity.districts);  
});  // 填充区县下拉框  
function updateDistrictSelect(districts) {  const districtSelect = document.getElementById('district');  districtSelect.innerHTML = ''; // 清空之前的选项  districts.forEach(district => {  const option = document.createElement('option');  option.value = district.id;  option.text = district.name;  districtSelect.appendChild(option);  });  
}  // 清空区县下拉框的选项  
function clearDistrictSelect() {  const districtSelect = document.getElementById('district');  districtSelect.innerHTML = ''; // 清空之前的选项  
}

这个示例代码实现了基于假数据的三级联动下拉框。当用户选择省份时,城市下拉框会更新为所选省份下的城市列表;当用户选择城市时,区县下拉框会更新为所选城市下的区县列表。注意,这个示例仅用于演示基本思路,实际应用中可能需要更复杂的逻辑和错误处理。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/787401.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

文件操作(2)【文件的随机读写】【文件读取结束的判定】

一.文件的随机读写 1.fseek函数 这个函数可以根据文件指针的位置和偏移量来定位文件指针&#xff08;文件内容的光标&#xff09;。有三个参数&#xff1a; stream&#xff1a;文件指针&#xff0c;指向要设置位置的文件。offset&#xff1a;偏移量&#xff0c;可以为正数、负…

Vue3:用Pinia的storeToRefs结构赋值store数据

一、情景描述 我们学习了Pinia之后&#xff0c;知道&#xff0c;数据是配置在Pinia的state里面的。 那么&#xff0c;如果有多个字段需要取出来使用&#xff0c;并且不丢失数据的响应式&#xff0c;如何优雅的操作了&#xff1f; 这里就用到了Pinia的storeToRefs函数 二、案…

三角形最小路径和

题目链接 三角形最小路径和 题目描述 注意点 -10000 < triangle[i][j] < 10000triangle[i].length triangle[i - 1].length 1triangle[0].length 1 解答思路 由题意得&#xff0c;到达任意第i层第j个节点的路径和一定是由第i - 1层第j - 1或第j个节点到达&#x…

【基频提取算法-PYIN】

本文对基频提取算法 PYIN 做以介绍。如有表述不当之处欢迎批评指正。欢迎任何形式的转载&#xff0c;但请务必注明出处。 文章目录 1. 引言2. PYIN 各模块代码讲解2.1. 概率 YIN 算法2.2. 使用 HMM 得到更平滑的音高轨迹2.2.1. 观测概率2.2.2. 状态转移概率2.2.3. 维特比算法解…

JavaScript高级应用

学习作用域、变量提升、闭包等语言特征&#xff0c;加深对 JavaScript 的理解&#xff0c;掌握变量赋值、函数声明的简洁语法&#xff0c;降低代码的冗余度。 理解作用域对程序执行的影响 能够分析程序执行的作用域范围 理解闭包本质&#xff0c;利用闭包创建隔离作用域 了解…

直方图均衡化的本质

Rafael C. Gonzalez “Digital Image Processing”的错误 直方图均衡化的本质是灰度级分布的近邻映射&#xff0c;这部分的内容全错。总有些人崇洋媚外。 我修改了相关的内容&#xff0c;参阅禹晶、肖创柏、廖庆敏《数字图像处理&#xff08;面向新工科的电工电子信息基础课程…

如何召开一次创意十足的OKR头脑风暴会?

召开一次创意十足的OKR&#xff08;Objectives and Key Results&#xff0c;目标与关键成果&#xff09;头脑风暴会&#xff0c;是激发团队成员智慧、明确共同目标并落实关键行动的重要环节。下面将详细列举召开此类头脑风暴会的具体步骤&#xff0c;以确保会议达到预期效果。 …

Outlook会议邀请邮件在答复后就不见了

时常会有同事找到我说&#xff0c;Outlook答复会议邀请邮件后收件箱就找不到会议邀请的邮件了。 这其实是Outlook的的一个机制&#xff0c;会把应答后的会议邀请邮件从收件箱自动删除&#xff0c;到已删除的邮件那里就能找到。如果不想要自动删除&#xff0c;改一个设置即可。…

程序员学CFA——道德和行为准则(三)

道德和行为准则&#xff08;三&#xff09; CFA职业行为准则准则I&#xff1a;职业操守I&#xff08;A&#xff09;法律知识内容细则指引 I&#xff08;B&#xff09;独立性和客观性内容细则指引 I&#xff08;C&#xff09;曲解内容细则指引 I&#xff08;D&#xff09;渎职内…

HarmonyOS 应用开发之自定义组件的自定义布局

如果需要通过测算的方式布局自定义组件内子组件的位置&#xff0c;建议使用以下接口&#xff1a; onMeasureSize&#xff1a;组件每次布局时触发&#xff0c;计算子组件的尺寸&#xff0c;其执行时间先于onPlaceChildren。 onPlaceChildren&#xff1a;组件每次布局时触发&…

【Python学习】—Python常见的面试题

【Python学习】—Python常见的面试题 1、一个变量没有定义报什么错误 一般在 python 中会有红色的波浪线标出来要是运行后&#xff0c;就直接会报变量没定义的错&#xff1a;NameError&#xff1a; name’i’ is not defined 2、 列表与元组的区别 他们最大的区别 列表可以…

step-by-step系列之-openGauss1-0-1-Docker版本单机安装指南

step by step 系列之&#xff1a;openGauss1.0.1 Docker 版本单机安装指南 1.软硬件环境 硬件环境&#xff1a; 项目 最低配置 推荐配置 测试配置 硬盘 用于安装openGauss的硬盘需最少满足如下要求&#xff1a; 至少1GB用于安装openGauss的应用程序包。每个主机需大约3…

[游戏开发]Unreal引擎知识

工程通常会选择Development_Editor模式&#xff0c;它会过滤掉很多Debug信息&#xff0c;开发期间占用内存更小&#xff0c;项目运行更流畅&#xff0c;但也有缺点&#xff0c;就是部分断点信息看不到&#xff0c; 有两种解决办法&#xff1a; 1&#xff0c;选择DebugGame_Ed…

树与二叉树的应用试题

01&#xff0e;在有n个叶结点的哈夫曼树中&#xff0c;非叶结点的总数是( A ). A. n-1 B. n C. 2n-1 D.2n解析&#xff1a;哈夫曼树中只有度为0和2的结点&#xff0c;在非空二…

相关滤波跟踪算法-CSK

0. 写在前面 对相关滤波算法综述比较强的文档&#xff1a; NIUBILITY的相关滤波框架详解 - 知乎 (zhihu.com) 1. 概述 相关滤波算法问世之前&#xff0c;跟踪算法饱受运行时间的困扰&#xff0c;直到MOSSE算法出现&#xff0c;直接将算法速度提到了615fps&#xff0c;第一次将…

9proxy—数据采集工具全面测评

9Proxy数据采集工具Unlock the web with 9Proxy, the top residential proxy provider. Get unlimited bandwidth, affordable prices, and secure HTTPS and Socks5 configurations.https://9proxy.com/?utm_sourceblog&utm_mediumcsdn&utm_campaignyan 前言 在当今数…

2024年04月数据库流行度最新排名

点击查看最新数据库流行度最新排名&#xff08;每月更新&#xff09; 2024年04月数据库流行度最新排名 TOP DB顶级数据库索引是通过分析在谷歌上搜索数据库名称的频率来创建的 一个数据库被搜索的次数越多&#xff0c;这个数据库就被认为越受欢迎。这是一个领先指标。原始数…

利用Flutter的混淆工具保护应用代码安全

在移动应用开发中&#xff0c;保护应用代码安全至关重要。Flutter 提供了简单易用的混淆工具&#xff0c;帮助开发者在构建 release 版本应用时有效保护代码。本文将介绍如何在 Flutter 应用中使用混淆&#xff0c;并提供了相关的操作步骤和注意事项。 &#x1f4dd; 摘要 本…

Android笔记--MediaCodec(一)

这一节主要来了解一下MediaCodec&#xff0c;Android MediaCodec 是 Android 平台提供的一个用于处理音频和视频数据的 API。它允许开发者对音频和视频数据进行编码和解码&#xff0c;支持多种格式和编解码器。MediaCodec API 通常用于实现实时音视频处理&#xff0c;如视频录制…

我的C++奇迹之旅:值和引用的本质效率与性能比较

文章目录 &#x1f4dd;引用&#x1f320;引用概念&#x1f309;引用特性 &#x1f320;使用场景&#x1f309;做参数&#xff08;传值与传地址&#xff09;&#x1f309;传值、传引用效率比较 &#x1f320;引用做返回值&#x1f309;引用和指针的区别 &#x1f320;常引用&am…