利用ajax和json实现省市区三级联动
时间: 2024-01-05 12:13:26 浏览: 32
三级联动是指一级选择后，二级会根据一级的选择发生变化，三级会根据二级的选择发生变化。下面我们来利用ajax和json实现省市区三级联动。
1. 创建HTML页面
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>省市区三级联动</title>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<select id="province">
<option value="">请选择省份</option>
</select>
<select id="city">
<option value="">请选择城市</option>
</select>
<select id="area">
<option value="">请选择区县</option>
</select>
<script>
$(function () {
// 加载省份数据
$.getJSON("province.json", function (data) {
var options = "<option value=''>请选择省份</option>";
$.each(data, function (index, item) {
options += "<option value='" + item.code + "'>" + item.name + "</option>";
});
$("#province").html(options);
});
// 省份选择发生变化时加载城市数据
$("#province").change(function () {
var provinceCode = $(this).val();
if (provinceCode) {
$.getJSON("city.json", {provinceCode: provinceCode}, function (data) {
var options = "<option value=''>请选择城市</option>";
$.each(data, function (index, item) {
options += "<option value='" + item.code + "'>" + item.name + "</option>";
});
$("#city").html(options);
});
} else {
$("#city").html("<option value=''>请选择城市</option>");
$("#area").html("<option value=''>请选择区县</option>");
}
});
// 城市选择发生变化时加载区县数据
$("#city").change(function () {
var cityCode = $(this).val();
if (cityCode) {
$.getJSON("area.json", {cityCode: cityCode}, function (data) {
var options = "<option value=''>请选择区县</option>";
$.each(data, function (index, item) {
options += "<option value='" + item.code + "'>" + item.name + "</option>";
});
$("#area").html(options);
});
} else {
$("#area").html("<option value=''>请选择区县</option>");
}
});
});
</script>
</body>
</html>
```
2. 创建province.json文件
```json
[
{"code": "110000", "name": "北京市"},
{"code": "120000", "name": "天津市"},
{"code": "130000", "name": "河北省"},
{"code": "140000", "name": "山西省"},
{"code": "150000", "name": "内蒙古自治区"},
{"code": "210000", "name": "辽宁省"},
{"code": "220000", "name": "吉林省"},
{"code": "230000", "name": "黑龙江省"},
{"code": "310000", "name": "上海市"},
{"code": "320000", "name": "江苏省"},
{"code": "330000", "name": "浙江省"},
{"code": "340000", "name": "安徽省"},
{"code": "350000", "name": "福建省"},
{"code": "360000", "name": "江西省"},
{"code": "370000", "name": "山东省"},
{"code": "410000", "name": "河南省"},
{"code": "420000", "name": "湖北省"},
{"code": "430000", "name": "湖南省"},
{"code": "440000", "name": "广东省"},
{"code": "450000", "name": "广西壮族自治区"},
{"code": "460000", "name": "海南省"},
{"code": "500000", "name": "重庆市"},
{"code": "510000", "name": "四川省"},
{"code": "520000", "name": "贵州省"},
{"code": "530000", "name": "云南省"},
{"code": "540000", "name": "西藏自治区"},
{"code": "610000", "name": "陕西省"},
{"code": "620000", "name": "甘肃省"},
{"code": "630000", "name": "青海省"},
{"code": "640000", "name": "宁夏回族自治区"},
{"code": "650000", "name": "新疆维吾尔自治区"}
]
```
3. 创建city.json文件
```json
{
"110000": [
{"code": "110100", "name": "市辖区"},
{"code": "110200", "name": "县"}
],
"120000": [
{"code": "120100", "name": "市辖区"},
{"code": "120200", "name": "县"}
],
"130000": [
{"code": "130100", "name": "石家庄市"},
{"code": "130200", "name": "唐山市"},
{"code": "130300", "name": "秦皇岛市"},
{"code": "130400", "name": "邯郸市"},
{"code": "130500", "name": "邢台市"},
{"code": "130600", "name": "保定市"},
{"code": "130700", "name": "张家口市"},
{"code": "130800", "name": "承德市"},
{"code": "130900", "name": "沧州市"},
{"code": "131000", "name": "廊坊市"},
{"code": "131100", "name": "衡水市"}
],
"140000": [
{"code": "140100", "name": "太原市"},
{"code": "140200", "name": "大同市"},
{"code": "140300", "name": "阳泉市"},
{"code": "140400", "name": "长治市"},
{"code": "140500", "name": "晋城市"},
{"code": "140600", "name": "朔州市"},
{"code": "140700", "name": "晋中市"},
{"code": "140800", "name": "运城市"},
{"code": "140900", "name": "忻州市"},
{"code": "141000", "name": "临汾市"},
{"code": "141100", "name": "吕梁市"}
],
// 省略其他省份的城市数据
}
```
4. 创建area.json文件
```json
{
"110100": [
{"code": "110101", "name": "东城区"},
{"code": "110102", "name": "西城区"},
{"code": "110105", "name": "朝阳区"},
{"code": "110106", "name": "丰台区"},
{"code": "110107", "name": "石景山区"},
{"code": "110108", "name": "海淀区"},
{"code": "110109", "name": "门头沟区"},
{"code": "110111", "name": "房山区"},
{"code": "110112", "name": "通州区"},
{"code": "110113", "name": "顺义区"},
{"code": "110114", "name": "昌平区"},
{"code": "110115", "name": "大兴区"},
{"code": "110116", "name": "怀柔区"},
{"code": "110117", "name": "平谷区"}
],
"110200": [
{"code": "110228", "name": "密云县"},
{"code": "110229", "name": "延庆县"}
],
"120100": [
{"code": "120101", "name": "和平区"},
{"code": "120102", "name": "河东区"},
{"code": "120103", "name": "河西区"},
{"code": "120104", "name": "南开区"},
{"code": "120105", "name": "河北区"},
{"code": "120106", "name": "红桥区"},
{"code": "120110", "name": "东丽区"},
{"code": "120111", "name": "西青区"},
{"code": "120112", "name": "津南区"},
{"code": "120113", "name": "北辰区"},
{"code": "120114", "name": "武清区"},
{"code": "120115", "name": "宝坻区"},
{"code": "120116", "name": "滨海新区"},
{"code": "120117", "name": "宁河区"},
{"code": "120118", "name": "静海区"}
],
"120200": [
{"code": "120225", "name": "蓟县"}
],
"130100": [
{"code": "130102", "name": "长安区"},
{"code": "130104", "name": "桥西区"},
{"code": "130105", "name": "新华区"},
{"code": "130107", "name": "井陉矿区"},
{"code": "130108", "name": "裕华区"},
{"code": "130109", "name": "藁城区"},
{"code": "130110", "name": "鹿泉区"},
{"code": "130111", "name": "栾城区"},
{"code": "130121", "name": "井陉县"},
{"code": "130123", "name": "正定县"},
{"code": "130125", "name": "行唐县"},
{"code": "130126", "name": "灵寿县"},
{"code": "130127", "name": "高邑县"},
{"code": "130128", "name": "深泽县"},
{"code": "130129", "name": "赞皇县"},
{"code": "130130", "name": "无极县"},
{"code": "130131", "name": "平山县"},
{"code": "130132", "name": "元氏县"},
{"code": "130133", "name": "赵县"},
{"code": "130181", "name": "辛集市"},
{"code": "130183", "name": "晋州市"},
{"code": "130184", "name": "新乐市"}
],
// 省略其他城市的区县数据
}
```
以上就是利用ajax和json实现省市区三级联动的全部代码。在实际开发中，可以根据自己的需求进行修改。
相关推荐
最新推荐
集团企业数字孪生平台信息化蓝图（应用系统架构、数据架构、IT基础设施与信息安全架构、信息化组织与管控.pptx
集团企业数字孪生平台信息化蓝图（应用系统架构、数据架构、IT基础设施与信息安全架构、信息化组织与管控.pptx
基于微信小程序的助农扶贫小程序
大学生毕业设计、大学生课程设计作业
node-v6.9.1.tar.xz
Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。
Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。
Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。
在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。
基于matlab开发的多元散射校正和变量标准化Matlab处理程序，可以对建模前的原始数据进行校正、处理.rar
基于matlab开发的多元散射校正和变量标准化Matlab处理程序，可以对建模前的原始数据进行校正、处理.rar
吉林大学离散数学2笔记 自用.pdf
吉林大学离散数学2笔记 自用
RTL8188FU-Linux-v5.7.4.2-36687.20200602.tar(20765).gz
REALTEK 8188FTV 8188eus 8188etv linux驱动程序稳定版本， 支持AP,STA 以及AP+STA 共存模式。 稳定支持linux4.0以上内核。
管理建模和仿真的文件
管理Boualem Benatallah引用此版本：布阿利姆·贝纳塔拉。管理建模和仿真。约瑟夫-傅立叶大学-格勒诺布尔第一大学，1996年。法语。NNT：电话：00345357HAL ID：电话：00345357https://theses.hal.science/tel-003453572008年12月9日提交HAL是一个多学科的开放存取档案馆，用于存放和传播科学研究论文，无论它们是否被公开。论文可以来自法国或国外的教学和研究机构，也可以来自公共或私人研究中心。L’archive ouverte pluridisciplinaire
：YOLOv1目标检测算法：实时目标检测的先驱，开启计算机视觉新篇章
# 1. 目标检测算法概述
目标检测算法是一种计算机视觉技术，用于识别和定位图像或视频中的对象。它在各种应用中至关重要，例如自动驾驶、视频监控和医疗诊断。
目标检测算法通常分为两类：两阶段算法和单阶段算法。两阶段算法，如 R-CNN 和 Fast R-CNN，首先生成候选区域，然后对每个区域进行分类和边界框回归。单阶段算法，如 YOLO 和 SSD，一次性执行检
info-center source defatult
这是一个 Cisco IOS 命令，用于配置 Info Center 默认源。Info Center 是 Cisco 设备的日志记录和报告工具，可以用于收集和查看设备的事件、警报和错误信息。该命令用于配置 Info Center 默认源，即设备的默认日志记录和报告服务器。在命令行界面中输入该命令后，可以使用其他命令来配置默认源的 IP 地址、端口号和协议等参数。
c++校园超市商品信息管理系统课程设计说明书(含源代码) (2).pdf
校园超市商品信息管理系统课程设计旨在帮助学生深入理解程序设计的基础知识，同时锻炼他们的实际操作能力。通过设计和实现一个校园超市商品信息管理系统，学生掌握了如何利用计算机科学与技术知识解决实际问题的能力。在课程设计过程中，学生需要对超市商品和销售员的关系进行有效管理，使系统功能更全面、实用，从而提高用户体验和便利性。
学生在课程设计过程中展现了积极的学习态度和纪律，没有缺勤情况，演示过程流畅且作品具有很强的使用价值。设计报告完整详细，展现了对问题的深入思考和解决能力。在答辩环节中，学生能够自信地回答问题，展示出扎实的专业知识和逻辑思维能力。教师对学生的表现予以肯定，认为学生在课程设计中表现出色，值得称赞。
整个课程设计过程包括平时成绩、报告成绩和演示与答辩成绩三个部分，其中平时表现占比20%，报告成绩占比40%，演示与答辩成绩占比40%。通过这三个部分的综合评定，最终为学生总成绩提供参考。总评分以百分制计算，全面评估学生在课程设计中的各项表现，最终为学生提供综合评价和反馈意见。
通过校园超市商品信息管理系统课程设计，学生不仅提升了对程序设计基础知识的理解与应用能力，同时也增强了团队协作和沟通能力。这一过程旨在培养学生综合运用技术解决问题的能力，为其未来的专业发展打下坚实基础。学生在进行校园超市商品信息管理系统课程设计过程中，不仅获得了理论知识的提升，同时也锻炼了实践能力和创新思维，为其未来的职业发展奠定了坚实基础。
校园超市商品信息管理系统课程设计的目的在于促进学生对程序设计基础知识的深入理解与掌握，同时培养学生解决实际问题的能力。通过对系统功能和用户需求的全面考量，学生设计了一个实用、高效的校园超市商品信息管理系统，为用户提供了更便捷、更高效的管理和使用体验。
综上所述，校园超市商品信息管理系统课程设计是一项旨在提升学生综合能力和实践技能的重要教学活动。通过此次设计，学生不仅深化了对程序设计基础知识的理解，还培养了解决实际问题的能力和团队合作精神。这一过程将为学生未来的专业发展提供坚实基础，使其在实际工作中能够胜任更多挑战。