思路：绑定选择框的change事件，当选择框的值发生变化时，触发相应的处理函数（获取选择的省份值(转化成整数index)。根据index动态生成对应的城市选项，并添加到选择框中，然后清空，省、城市、区同理）。
以下是html代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#box {
background-image: linear-gradient(0deg, rgb(236, 205, 225) 23.8%, #4ee8f3);
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
font-size: 30px;
color: darkmagenta;
}
</style>
</head>
<body>
<div id="box">
<span>省</span>
<select name="province" id="province">
<option value="-1">请选择</option>
</select>
<span>市</span>
<select name="city" id="city">
<option value="-1">请选择</option>
</select>
<span>区</span>
<select name="region" id="region">
<option value="-1">请选择</option>
</select>
</div>
<script src="https://code.jquery.com/jquery-3.7.0.js"></script>
<script>
$(function () {
$.ajax({
type: "get",
url: "object.json",
dataType: "json",
success: function (data) {
/* 以下变量表示选择了省份、选择了市、选择了区后 */
var provinceSelect = $("#province");
var citySelect = $("#city");
var regionSelect = $("#region");
/* value = -1表示如果省份未选择之前都显示“请选择” */
provinceSelect.append("<option value='-1'>请选择</option>");
/* 遍历省份对象，+表示生成html代码，将每个省份作为option加入到请选择中 */
/* 索引是为了方便后续 */
$.each(data.province, function (index, province) {
provinceSelect.append("<option value='" + index + "'>" + province.name + "</option>");
});
/* 为省份选择框绑定一个change事件的处理函数 */
provinceSelect.on("change", function () {
/* 获取正在选择的省份索引值，将其转换为整数 */
var selectedProvinceIndex = parseInt($(this).val());
/* 清空城市选择框和区域选择框，(上一个省份剩下的)，并在其中添加"请选择" */
citySelect.empty().append("<option value='-1'>请选择</option>");
regionSelect.empty().append("<option value='-1'>请选择</option>");
/* 省份选择成功，获取对象 */
if (selectedProvinceIndex >= 0) {
var selectedProvince = data.province[selectedProvinceIndex];
/* 遍历next属性(城市)，同理添加到选择框中 */
$.each(selectedProvince.next, function (index, city) {
citySelect.append("<option value='" + index + "'>" + city.name + "</option>");
});
}
});
/* 同省份选择 */
citySelect.on("change", function () {
var selectedProvinceIndex = parseInt(provinceSelect.val());
var selectedCityIndex = parseInt($(this).val());
regionSelect.empty().append("<option value='-1'>请选择</option>");
/* 省份和城市都被选中时才触发区类 */
if (selectedProvinceIndex >= 0 && selectedCityIndex >= 0) {
var selectedProvince = data.province[selectedProvinceIndex];
var selectedCity = selectedProvince.next[selectedCityIndex];
$.each(selectedCity.next, function (index, region) {
regionSelect.append("<option value='" + index + "'>" + region.name + "</option>");
});
}
});
},
/* 不成功控制台显示 */
error: function (errdata) {
console.log(errdata);
}
});
});
</script>
</body>
</html>
object.json代码：
{
"province": [
{
"name": "浙江省",
"next": [
{
"name": "杭州市",
"next": [
{
"name": "萧山区"
},
{
"name": "滨江区"
},
{
"name": "西湖区"
}
]
},
{
"name": "金华市",
"next": [
{
"name": "婺城区"
},
{
"name": "金东区"
},
{
"name": "开发区"
}
]
},
{
"name": "温州市",
"next": [
{
"name": "鹿城区"
},
{
"name": "龙湾区"
},
{
"name": "洞头区"
}
]
}
]
},
{
"name": "安徽省",
"next": [
{
"name": "合肥市",
"next": [
{
"name": "庐阳区"
},
{
"name": "瑶海区"
},
{
"name": "蜀山区"
}
]
},
{
"name": "芜湖市",
"next": [
{
"name": "镜湖区"
},
{
"name": "鸠江区"
},
{
"name": "弋江区"
}
]
},
{
"name": "淮北市",
"next": [
{
"name": "杜集区"
},
{
"name": "相山区"
},
{
"name": "烈山区"
}
]
}
]
},
{
"name": "山东省",
"next": [
{
"name": "济南市",
"next": [
{
"name": "长清区"
},
{
"name": "章丘区"
},
{
"name": "济阳区"
}
]
},
{
"name": "青岛市",
"next": [
{
"name": "黄岛区"
},
{
"name": "城阳区"
},
{
"name": "崂山区"
}
]
},
{
"name": "淮北市",
"next": [
{
"name": "杜集区"
},
{
"name": "相山区"
},
{
"name": "烈山区"
}
]
}
]
}
]
}效果图如下：
3021
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
