详细的三级联动的解题思路
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<select id="province">
<option>请选择省份</option>
</select>
<select id="city">
<option>请选择市区</option>
</select>
<select id="area">
<option>请选择地区</option>
</select>
<script>
[
{
province: "湖北",
children: [
{
city: "武汉",
children: [
{
area: "江夏区",
},
{
area: "洪山",
},
{
area: "新洲区",
},
],
},
{
city: "黄石",
children: [
{
area: "黄石1",
},
{
area: "黄石2",
},
{
area: "黄石3",
},
],
},
{
city: "襄阳",
},
{
city: "荆州",
},
],
},
{
province: "湖南",
children: [
{
city: "长沙",
children: [
{
area: "长沙1",
},
{
area: "长沙2",
},
{
area: "长沙3",
},
],
},
{
city: "株洲",
children: [
{
area: "株洲1",
},
{
area: "株洲2",
},
{
area: "株洲3",
},
],
},
{
city: "张家界",
children: [
{
area: "张家界1",
},
{
area: "张家界2",
},
{
area: "张家界3",
},
],
},
{
city: "常德",
},
],
},
];
function ajax(option) {
let { path, type = "get", dataType = "json", successCB } = option;
const xhr = new XMLHttpRequest();
xhr.open(type, path, true);
xhr.send();
xhr.onreadystatechange = () => {
if (xhr.readyState == 4 && xhr.status == 200) {
let data = xhr.responseText;
if (dataType == "json") {
data = JSON.parse(data);
}
successCB && successCB(data);
}
};
}
</script>
<script>
// 模拟select day13 参考
//三级联动的解题思路:
// 首先要从后端请求数据ajax
//接下来获取到数据进行解构,然后遍历数组,把数据渲染到页面上去,
//一步步的把每一步页面的点击事件做完,然后进行最后的页面的数据的渲染.
//获取数据请求
ajax({
path: "./city.json",
//回调函数返回一个请求的状态,从后端获取成功的数据的数组集合,然后对这个数据解构
successCB: (data) => {
console.log(data);
//定义一个渲染到选择省份的一个输入框的变量,得到的一个结果是数组里面的嵌套的一个对象就是关联对象的一个数组
let str1 = "<option>请选择省份</option>";
//循环遍历这个数组,得到一个省份的结果,
//最重要的一部核心思想,因为数组里面嵌套关联了一个对象,一定要把这个对象给解构出来,这是非常重要的一步方法;
data.forEach(({ province }) => {
str1 += `<option>${province}</option>`;
});
province.innerHTML = str1;
//鼠标选择省份发生了数值的变化这时用到了点击onchange事件;
province.onchange = () => {
//定义一个接收省份的变量值;
const prov = province.value;
//考虑到数值选择的情况,因为用户在选择的过程中,如果选择了其他的省份的情况的时候,
//其他的两个选择框的输入值发生了变化;
if (prov == "请选择省份") {
city.innerHTML = "<option>请选择市区</option>";
area.innerHTML = "<option>请选择地区</option>";
} else {
//定义一个遍历接收过滤到的数据,选择了是当前的省份,就要把不是这个省份下面的其他的数据包给过滤掉;
let res = data.filter((val) => val.province === prov)[0];
//定义一个变量接收得到了当前省分下面的城市的集合的欸一个关联对象的一个数组,
//这时候要循环遍历整个数组,把结果输出,渲染到输入框里面去;
let cities = res.children;
console.log(cities);
//结果的渲染到页面上去;
let str2 = "<option>请选择市区</option>";
//循环遍历关联对象的一个数组,一定要把里面的对象给解构出来;
cities.forEach(({ city }) => {
str2 += `<option>${city}</option>`;
});
city.innerHTML = str2;
//依次类推,市区选择了以后,发生数值的该变,onchange事件出现
city.onchange = () => {
const cityVal = city.value;
//条件的判断,市区选择的不是当前的结果,后面的地区的显示栏需要回复默认值;
if (cityVal == "请选择市区") {
area.innerHTML = "<option>请选择地区</option>";
} else {
// 过滤cities
//选择地区的结果,需要把市区的结果给过滤出来,得到需要的数值;
const areas = cities.filter((val) => val.city == cityVal)[0];
const areasList = areas.children;
console.log(areasList);
let str3 = "<option>请选择地区</option>";
areasList.forEach(({ area }) => {
str3 += `<option>${area}</option>`;
});
area.innerHTML = str3;
}
};
}
};
},
});
</script>
</body>
</html>
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· 无需6万激活码！GitHub神秘组织3小时极速复刻Manus，手把手教你使用OpenManus搭建本
· Manus爆火，是硬核还是营销？
· 终于写完轮子一部分：tcp代理 了，记录一下
· 别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误
· 单元测试从入门到精通