大佬可以帮忙看看这个是有什么问题吗
2023/03/20 12:42:01
html+js+ajax+json的六级联动
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>6级联动</title>
<script src="jquery-3.6.0.min.js"></script>
<script src="main.js"></script>
</head>
<body>
<div>
<select id="province">
<option value="">请选择省份</option>
</select>
<select id="city">
<option value="">请选择城市</option>
</select>
<select id="county">
<option value="">请选择县区</option>
</select>
<select id="town">
<option value="">请选择乡镇街道</option>
</select>
<select id="village">
<option value="">请选择村社区</option>
</select>
<select id="group">
<option value="">请选择组</option>
</select>
</div>
</body>
</html>
----------------------------------------------------------------------
js文件
//
//
//
// 当网页加载完成时执行
$(document).ready(function() {
// 加载省份数据
$.ajax({
type: "GET",
url: "data/province.json",
dataType: "json",
success: function(data) {
// 添加省份选项
$.each(data, function(index, item) {
$("#province").append("<option value='" + item.code + "'>" + item.name + "</option>");
});
}
});
// 当省份改变时执行
$("#province").change(function() {
// 清空城市、县区、乡镇街道、村社区和组的选项
$("#city").empty();
$("#county").empty();
$("#town").empty();
$("#village").empty();
$("#group").empty();
// 加载城市数据
var code = $(this).val();
if (code) {
$.ajax({
type: "GET",
url: "data/city_" + code + ".json",
dataType: "json",
success: function(data) {
// 添加城市选项
$.each(data, function(index, item) {
$("#city").append("<option value='" + item.code + "'>" + item.name + "</option>");
});
}
});
}
});
// 当城市改变时执行
$("#city").change(function() {
// 清空县区、乡镇街道、村社区和组的选项
$("#county").empty();
$("#town").empty();
$("#village").empty();
$("#group").empty();
// 加载县区数据
var code = $(this).val();
if (code) {
$.ajax({
type: "GET",
url: "data/county_" + code + ".json",
dataType: "json",
success: function(data) {
// 添加县区选项
$.each(data, function(index,item) {
$("#county").append("<option value='" + item.code + "'>" + item.name + "</option>");
});
}
});
}
});
// 当县区改变时执行
$("#county").change(function() {
// 清空乡镇街道、村社区和组的选项
$("#town").empty();
$("#village").empty();
$("#group").empty();
// 加载乡镇街道数据
var code = $(this).val();
if (code) {
$.ajax({
type: "GET",
url: "data/town_" + code + ".json",
dataType: "json",
success: function(data) {
// 添加乡镇街道选项
$.each(data, function(index, item) {
$("#town").append("<option value='" + item.code + "'>" + item.name + "</option>");
});
}
});
}
});
// 当乡镇街道改变时执行
$("#town").change(function() {
// 清空村社区和组的选项
$("#village").empty();
$("#group").empty();
// 加载村社区数据
var code = $(this).val();
if (code) {
$.ajax({
type: "GET",
url: "data/village_" + code + ".json",
dataType: "json",
success: function(data) {
// 添加村社区选项
$.each(data, function(index, item) {
$("#village").append("<option value='" + item.code + "'>" + item.name + "</option>");
});
}
});
}
});
// 当村社区改变时执行
$("#village").change(function() {
// 清空组的选项
$("#group").empty();
// 加载组数据
var code = $(this).val();
if (code) {
$.ajax({
type: "GET",
url: "data/group_" + code + ".json",
dataType: "json",
success: function(data) {
// 添加组选项
$.each(data, function(index, item) {
$("#group").append("<option value='" + item.code + "'>" + item.name + "</option>");
});
}
});
}
});
});
-----------------------------------json文件
```json
[
{
"name": "北京市",
"code": "110000"
},
{
"name": "天津市",
"code": "120000"
},
{
"name": "河北省",
"code": "130000"
},
// 省份数据省略
]
---------------------------
[
{
"name": "市辖区",
"code": "110100"
},
{
"name": "东城区",
"code": "110101"
},
{
"name": "西城区",
"code": "110102"
},
// 北京市的区县数据省略
]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>6级联动</title>
<script src="jquery-3.6.0.min.js"></script>
<script src="main.js"></script>
</head>
<body>
<div>
<select id="province">
<option value="">请选择省份</option>
</select>
<select id="city">
<option value="">请选择城市</option>
</select>
<select id="county">
<option value="">请选择县区</option>
</select>
<select id="town">
<option value="">请选择乡镇街道</option>
</select>
<select id="village">
<option value="">请选择村社区</option>
</select>
<select id="group">
<option value="">请选择组</option>
</select>
</div>
</body>
</html>
----------------------------------------------------------------------
js文件
//
//
//
// 当网页加载完成时执行
$(document).ready(function() {
// 加载省份数据
$.ajax({
type: "GET",
url: "data/province.json",
dataType: "json",
success: function(data) {
// 添加省份选项
$.each(data, function(index, item) {
$("#province").append("<option value='" + item.code + "'>" + item.name + "</option>");
});
}
});
// 当省份改变时执行
$("#province").change(function() {
// 清空城市、县区、乡镇街道、村社区和组的选项
$("#city").empty();
$("#county").empty();
$("#town").empty();
$("#village").empty();
$("#group").empty();
// 加载城市数据
var code = $(this).val();
if (code) {
$.ajax({
type: "GET",
url: "data/city_" + code + ".json",
dataType: "json",
success: function(data) {
// 添加城市选项
$.each(data, function(index, item) {
$("#city").append("<option value='" + item.code + "'>" + item.name + "</option>");
});
}
});
}
});
// 当城市改变时执行
$("#city").change(function() {
// 清空县区、乡镇街道、村社区和组的选项
$("#county").empty();
$("#town").empty();
$("#village").empty();
$("#group").empty();
// 加载县区数据
var code = $(this).val();
if (code) {
$.ajax({
type: "GET",
url: "data/county_" + code + ".json",
dataType: "json",
success: function(data) {
// 添加县区选项
$.each(data, function(index,item) {
$("#county").append("<option value='" + item.code + "'>" + item.name + "</option>");
});
}
});
}
});
// 当县区改变时执行
$("#county").change(function() {
// 清空乡镇街道、村社区和组的选项
$("#town").empty();
$("#village").empty();
$("#group").empty();
// 加载乡镇街道数据
var code = $(this).val();
if (code) {
$.ajax({
type: "GET",
url: "data/town_" + code + ".json",
dataType: "json",
success: function(data) {
// 添加乡镇街道选项
$.each(data, function(index, item) {
$("#town").append("<option value='" + item.code + "'>" + item.name + "</option>");
});
}
});
}
});
// 当乡镇街道改变时执行
$("#town").change(function() {
// 清空村社区和组的选项
$("#village").empty();
$("#group").empty();
// 加载村社区数据
var code = $(this).val();
if (code) {
$.ajax({
type: "GET",
url: "data/village_" + code + ".json",
dataType: "json",
success: function(data) {
// 添加村社区选项
$.each(data, function(index, item) {
$("#village").append("<option value='" + item.code + "'>" + item.name + "</option>");
});
}
});
}
});
// 当村社区改变时执行
$("#village").change(function() {
// 清空组的选项
$("#group").empty();
// 加载组数据
var code = $(this).val();
if (code) {
$.ajax({
type: "GET",
url: "data/group_" + code + ".json",
dataType: "json",
success: function(data) {
// 添加组选项
$.each(data, function(index, item) {
$("#group").append("<option value='" + item.code + "'>" + item.name + "</option>");
});
}
});
}
});
});
-----------------------------------json文件
```json
[
{
"name": "北京市",
"code": "110000"
},
{
"name": "天津市",
"code": "120000"
},
{
"name": "河北省",
"code": "130000"
},
// 省份数据省略
]
---------------------------
[
{
"name": "市辖区",
"code": "110100"
},
{
"name": "东城区",
"code": "110101"
},
{
"name": "西城区",
"code": "110102"
},
// 北京市的区县数据省略
]