<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<script src="./js/库.js" type="text/javascript"></script>
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
.block{
width: 600px;
height: 500px;
border: 1px solid black;
margin: auto;
font-size: 25px;
}
#inputer{
width: 80%;
height: 45px;
outline: none;
}
.blocktop{
height: 50px;
}
.blockzhong{
height: 45px;
border-bottom: 1px solid silver;
background: #fffeec;
}
.blockxia{
height: 405px;
background: #f1ffff;
border: 1px solid black;
}
.spanlist,.spanlistt{
display: block;
background: #e0e0e0;
float: left;
margin-left: 5px;
font-size: 16px;
}
i{
font-style: normal;
}
</style>
</head>
<body>
<div class="block">
<div class="blocktop">
省:<input type="text" id="inputer" list="datalist"/>
<datalist id="datalist">
</datalist>
</div>
<div class="blockzhong"></div>
<div class="blockxia"></div>
</div>
<script>
var chose={
all:data,
inputer:document.querySelector("#inputer"),
date:document.querySelector("#datalist"),
blockxia:document.getElementsByClassName("blockxia")[0],
citylist:[],
creatoption:function(){
for(var i=0;i<this.all.length;i++){
var option=new Option(i,this.all[i].name);
this.date.appendChild(option);
}
},
addevent:function(){
var that=this;
this.inputer.onchange=function(){
var name=this.value;
that.all.forEach(function(val,index){
if(name==val.name){
that.citylist.push(val);
// console.log(that.citylist);
}
});
that.write();
}
},
write:function(){
var that=this;
//console.log(that)
that.blockxia.innerHTML="";
var obj=that.citylist[that.citylist.length-1];
//console.log(obj);
for(var index in obj.child){
// console.log(2);
// console.log(obj.child[index].name);
var span=document.createElement("span");
span.innerHTML=obj.child[index].name;
span.className="spanlist";
that.blockxia.appendChild(span);
}
// for (i = 0; i < obj.child.length; i++) {
// // console.log(opt.child)
// //console.log(opt.child.length)
// var span = document.createElement("span");
// span.className = "spanlist";
// span.innerHTML = obj.child[i].name;
// this.blockxia.appendChild(span);
}
chose.addclick(obj);
},
addclick:function(object){
var that=this;
var spanlist=document.getElementsByClassName("spanlist");
var blockzhong=document.querySelector(".blockzhong");
for(var i=0;i<spanlist.length;i++){
spanlist[i].index=i;
spanlist[i].onclick=function(){
that.citylist.push(object.child[this.index]);
this.className="spanlistt";
var i=document.createElement("i");
i.innerHTML="x";
i.className="close";
this.appendChild(i);
this.onclick = null;
blockzhong.appendChild(this);
that.write();
}
}
that.addclose();
},
addclose:function(){
var that=this;
var close=document.querySelectorAll(".close");
var spanlistt=document.querySelectorAll(".spanlistt");
// console.log(close);
for(var i=0;i<close.length;i++){
close[i].index=i;
//if(i==close.length-1)
if(i==close.length-1){
close[close.length-1].onclick=function(){
console.log(close.length-1);
that.citylist.pop();
spanlistt[this.index].remove();
that.write();
}
}
else{
close[i].onclick=function(){
//console.log(9);
that.citylist.splice(this.index+1,that.citylist.length-1);
//console.log(that.citylist);
spanlistt[this.index].remove();
for(var i=spanlistt.length-1;i>this.index;i--){
spanlistt[i].remove();
}
that.write();
}
}
}
}
}
chose.creatoption();
chose.addevent();
</script>
</body>
</html>
下面是自己写的数据
/**
* Created by Administrator on 2019/6/8.
*/
var data = [
{
name: "陕西省",
child: [
{
name: "西安市",
child: [
{
name: "高新区",
child: [
{
name: "街道办200",
child: [
{
name: "东1街"
},
{
name: "东2街"
},
{
name: "东3街"
}
]
}
]
},
{
name: "雁塔区",
child: [
{
name: "雁塔路101",
child: [
{
name: "雁东1街"
},
{
name: "雁东2街"
},
{
name: "雁东3街"
}
]
}
]
}
]
},
{
name: "宝鸡市",
child: [
{
name: "宝高新区",
child: [
{
name: "高新路01",
child: [
{
name: "高新东1街"
},
{
name: "高新东2街"
},
{
name: "高新东3街"
}
]
},
{
name: "高新路02",
child: [
{
name: "高新西1街"
},
{
name: "高新西2街"
},
{
name: "高新西3街"
}
]
}
]
},
{
name: "宝渭滨区",
child: [
{
name: "渭滨路101",
child: [
{
name: "渭滨西1街"
},
{
name: "渭滨西2街"
},
{
name: "渭滨西3街"
}
]
},
{
name: "渭滨路102",
child: [
{
name: "渭滨东1街"
},
{
name: "渭滨东2街"
},
{
name: "渭滨东3街"
}
]
}
]
}
]
}
]
},
{
name: "甘肃省",
child: [
{
name: "兰州市",
child: [
{
name: "兰州区1",
child: [
{
name: "兰州街道办200"
}
]
},
{
name: "兰州区2",
child: [
{
name: "兰州雁塔路101"
}
]
}
]
},
{
name: "酒泉市",
child: [
{
name: "酒泉区1",
child: [
{
name: "酒泉高新路01"
},
{
name: "酒泉高新路02"
}
]
},
{
name: "酒泉区2",
child: [
{
name: "酒泉渭滨路101"
},
{
name: "酒泉渭滨路102"
}
]
}
]
}
]
}
]
上面这个案例是多级联动的案例，我在写这个案例的时候发现了一个问题：就是如上图这段代码中用for循环到最后一个地点渭滨东2街，这个地点没有对应的child时，obj.child.length是for循环的一个条件，程序就会报错，如下图：
然而用for in循环就不会出现这种错误，程序如下：
因为在for in循环遍历中 object为null，undefined，JavaScript会跳过循环执行后面代码，在ECMAScript3中可能会抛出类型错误异常，（和for循环一样），但是ECMAScript6就修改了，
for in循环遍历中对这种情况不会抛出错误
186
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
