<!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>
*{
margin: 0;
padding: 0;
}
.box{
width: 450px;
padding: 5px;
border: 2px solid #eeeeee;
}
.xx{
border-bottom: 2px solid #56b4f8;
list-style: none;
width: 450px;
height: 40px;
box-sizing: border-box;
}
.xx li{
width: 80px;
float: left;
height: 40px;
line-height: 40px;
text-align: center;
}
.active{
background-color: #56b4f8;
color: #f5f5f5;
}
span{
width: 80px;
height: 30px;
display: inline-block;
font-size: 12px;
text-align: center;
line-height: 15px;
margin: 5px;
/* float: left; */
}
span:hover{
background-color: #56b4f8;
color: #f5f5f5;
}
#country{
width: 450px;
/* height: 300px; */
background-color: pink;
}
#countryside{
width: 450px;
/* height: 300px; */
background-color: yellow;
}
.sure{
background-color: #56b4f8;
color: #f5f5f5;
}
</style>
</head>
<body>
<div class="box">
<ul class="xx">
<li class="l1 active">省份</li>
<li class="l1">城市</li>
<li class="l1">区县</li>
</ul>
<div class="show">
<div id="city"></div>
<div id="country"></div>
<div id="countryside"></div>
</div>
</div>
<script src="./area-json.js"></script>
<script>
var li = document.querySelectorAll(".xx li")
var div = document.querySelectorAll(".show div")
var box = document.querySelector(".box")
var show = document.querySelector(".show")
var city = document.getElementById("city");
var country = document.getElementById("country");
var countryside = document.getElementById("countryside");
var countryarr = [];
var countrysidearr = [];
add(city,data)
for(var i = 0;i<data.length;i++){
city.children[i].onclick = function(){
country.innerText= ""
for(var j = 0;j<data.length;j++){
if(data[j].code == this.className){
countryarr = data[j].children
}
}
for(var d = 0;d<li.length;d++){
li[d].className = "li"
}
li[1].className = "l1 active"
div[1].style.display = "block"
div[0].style.display = "none"
div[2].style.display = "none"
add(country,countryarr)
}
}
for(var k = 0;k<countryarr.length;k++){
country.children[k].onclick = function(){
countryside.innerHTML = ""
for(var l = 0;l<data.length;l++){
if(data[l].code == this.className){
countrysidearr = countryarr[j].children
}
}
add(countryside,countrysidearr)
}
}
li[0].onclick = function(){
for(var b = 0;b<li.length;b++){
li[b].className = "li"
}
li[0].className = "l1 active"
div[0].style.display = "block"
div[1].style.display = "none"
div[2].style.display = "none"
}
li[1].onclick = function(){
for(var b = 0;b<li.length;b++){
li[b].className = "li"
}
li[1].className = "l1 active"
div[1].style.display = "block"
div[0].style.display = "none"
div[2].style.display = "none"
}
li[2].onclick = function(){
for(var b = 0;b<li.length;b++){
li[b].className = "li"
}
li[2].className = "l1 active"
div[2].style.display = "block"
div[0].style.display = "none"
div[1].style.display = "none"
}
function add (dom,arr){
for(var i = 0;i<arr.length;i++){
var span = document.createElement("span");
span.innerHTML = arr[i].name;
span.className = arr[i].code;
dom.appendChild(span);
}
}
</script>
</body>
</html>js文件下载地址：https://download.csdn.net/download/weixin_46073353/16759489?spm=1001.2014.3001.5503
点击二级页面获取不到第三级数据
下载码来一个
89行add(city,data)往下，这个data没看见在哪声明啊，下面就直接用了呢？
var data = [
{
"code" : "110000",
"name" : "北京市",
"children" : [{
"code" : "110100",
"name" : "市辖区",
"children" : [{
"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" : "平谷区"
}, {
"code" : "110118",
"name" : "密云区"
}, {
"code" : "110119",
"name" : "延庆区"
}
]
}
]
},部分js代码，都是这种格式
非常感谢您使用有问必答服务，为了后续更快速的帮您解决问题，现诚邀您参与有问必答体验反馈。您的建议将会运用到我们的产品优化中，希望能得到您的支持与协助！
速戳参与调研>>>https://t.csdnimg.cn/Kf0y