求助我的市区name和区name找不到数据？

IKUNzhenin

已于 2024-01-31 09:31:14 修改

阅读量97

点赞数 2

分类专栏： js如何学习求教文章标签： javascript 开发语言 ecmascript

于 2024-01-31 08:30:36 首次发布

本文链接：https://blog.csdn.net/IKUNzhenin/article/details/135945192

版权

js如何学习同时被 2 个专栏收录

17 篇文章 0 订阅

订阅专栏

求教

8 篇文章 0 订阅

订阅专栏

是否是循环问题

let xhr = new XMLHttpRequest();
// 创建一个新的XMLHttpRequest对象，命名为xhr。用来请求接口，处理异步操作；
// 这个对象用于在浏览器和服务器之间发送 HTTP 请求和接收响应。
xhr.open('get', 'js/index.json', true);
// 打开一个新的HTTP GET请求。// 请求的URL是'js/index.json'。// 第三个参数true表示请求是异步的。
xhr.send();
//发送要请求的要求
xhr.onreadystatechange = function() {
	// 设置一个事件监听器，当请求的状态发生变化时，这个函数就会被调用。
	if (xhr.readyState == 4 && xhr.status == 200) {
		// 检查请求是否已经完成（readyState == 4）并且是否成功（status == 200）。
		let text = xhr.responseText;
		// 获取响应的文本内容
		data = JSON.parse(text);
		// 将响应的文本内容解析为JSON对象，并将其赋值给变量data。
		item(data)
		// item(data)
		// 调用一个名为item的函数，并传入data作为参数。用来渲染或显示数据的函数。
	}
};
let data = [];
//创建一个变量以方便存储数据

//获取想要的变量 省 市 区
let shengs = document.getElementsByClassName('shengs')[0];
let shis = document.getElementsByClassName('shis')[0];
let qus = document.getElementsByClassName('qus')[0];
//省市区三级联合
// 省
//第一个标签
// 假设这是您的省份数据  
// 省数据渲染  
function item(data) {
	let str = "<option value=''>-请填写省份-</option>";
	for (let i = 0; i < data.length; i++) {
		console.log(data[i].name)
		str += `
	  <option value="${i}">${data[i].name}</option>    
	`;
	}
	shengs.innerHTML = str;
}
function sheng() {
	let str = "<option value=''>-请填写省份-</option>";
	for (let i = 0; i < data.length; i++) {
		console.log(data[i].name)
		str += `
	  <option value="${i}">${data[i].name}</option>    
	`;
	}
	shengs.innerHTML = str;
}
// 市区数据渲染      
function shi() {
	let str = "<option value=''>-请填写市份-</option>";
	for (let i = 0; i < data.length; i++) {
		if (shengs.value == data[i].sheng) { // 修正了sheng属性名  
			for (let j = 0; j < ddata[i].child.length; j++) {
				console.log(data[i].child.name)
				str += `
          <option value="${j}">${data[i].child[j].name}</option>  
        `;
		  // 修正了shi属性名
			}
		}
	}
	shis.innerHTML = str; // 在匹配到市级数据后更新市区选项  
}
// 城市数据渲染      
function qu() {
	let str = "<option value=''>-请填写市份-</option>";
	for (let i = 0; i < data.length; i++) {
		if (shengs.value == data[i].sheng) { // 修正了sheng属性名  
			for (let j = 0; j < data[i].child.length; j++) {
				if (shis.value == data[i].child[j].shi) { // 修正了shi属性名  
					for (let k = 0; k < data[i].child[j].child.length; k++) {
						str += `      
              <option value="${k}">${data[i].child[j].child[k].qu}</option>    // 修正了qu属性名  
            `;
					}
				}
			}
		}
	}
	qus.innerHTML = str;
}
// 显示的内容为决定显示的字符串  
//在渲染里判断是否选择省份如果没选择省份就保持原样
// 如已经选择第二个就拼接请选择市，
// 如已经选择市份第三个就

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>三级</title>
	</head>
	<body>
		<select class="shengs" onchange="item(data)">
			<option value="-请选择省-">-请选择省-</option>
			<option class="sheng" value="河南省">河南省</option>
		</select>
		<select class="shis" onchange="shi()">
			<option value="-请选择省-" >-请选择省-</option>
			<option class="shi" value="濮阳市">濮阳市</option>
		</select>
		<select class="qus" onchange="qu()">
			<option value="-请选择省-" >-请选择省-</option>
			<option class="qu" value="南阳区">南阳区</option>
		</select>
	</body>
	<script src="js/index.js"></script>
</html>

又或者是html的问题

还是json的文件的数据格式不对

[{
		"name": "河南省",
		"child": [{
			"name": "商丘市",
			"child": [{
				"name": "城镇区"
			}, {
				"name": "上阵区"
			}]
		}, {
			"name": "上扬市",
			"child": [{
				"name": "上扬区"
			}]
		}]
	}, {
		"name": "河东省",
		"child": [{
				"name": "南阳市",
				"child": [{
					"name": "商城区"
				}, {
					"name": "商长区"
				}]
			},
			{
				"name": "菏泽市",
				"child": [{
					"name": "菏泽区"
				}]
			}
		]
	}, {
		"name": "江西省",
		"child": [{
				"name": "南昌市",
				"child": [{
						"name": "南昌区"
					},
					{
						"name": "九江区"
					}, {
						"name": "临川区"
					}
				]
			},
			{
				"name": "九江市",
				"child": [{
					"name": "九上区"
				}]
			}, {
				"name": "临川市",
				"child": [{
					"name": "临川区"
				}]
			}
		]
	},
	{
		"name": "东北省",
		"child": [{
			"name": "三栋市",
			"child": [{
				"name": "三一区"
			}]
		}]
	},
	{
		"name": "河北省",
		"child": [{
			"name": "石家庄市",
			"child": [{
				"name": "石家庄区"
			}]
		}]
	},
	{
		"name": "辽宁省",
		"child": [{
			"name": "沈阳市",
			"child": [{
				"name": "沈阳区"
			}, {
				"name": "皇姑区"
			}, {
				"name": "铁西区"
			}, {
				"name": "苏家屯区"
			}, {
				"name": "沈北新区"
			}]
		}, {
			"name": "抚顺市",
			"child": [{
				"name": "和平区"
			}, {
				"name": "沈河区"
			}, {
				"name": "大东区"
			}]
		}, {
			"name": "大连市",
			"child": [{
				"name": "于洪区"
			}, {
				"name": "辽中区"
			}]
		}]
	}, {
		"name": "黑龙江省",
		"child": [{
			"name": "哈尔滨市",
			"child": [{
				"name": "五常区"
			}, {
				"name": "双城区"
			}, {
				"name": "香坊区"
			}, {
				"name": "木兰县"
			}, {
				"name": "西安区"
			}]
		}, {
			"name": "齐齐哈尔市",
			"child": [{
				"name": "齐齐哈尔区"
			}, {
				"name": "东安区"
			}, {
				"name": "向阳区"
			}, {
				"name": "尖山区"
			}, {
				"name": "新兴区"
			}]
		}, {
			"name": "鹤岗市",
			"child": [{
				"name": "鹤岗区"
			}, {
				"name": "哈尔滨区"
			}, {
				"name": "道里区"
			}, {
				"name": "萨尔图区"
			}, {
				"name": "鸡冠区"
			}]
		}]
	}
]

求教