<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>自动选择三级联动</title>
<style>
* {
margin: 0;
padding: 0;
}
.block {
position: relative;
top: 50px;
margin: auto;
width: 600px;
height: 500px;
border: 1px solid black;
}
.top > span {
line-height: 70px;
}
.top > input {
position: absolute;
left: 30px;
top: 20px;
width: 550px;
height: 30px;
}
.bottom {
margin-left: 30px;
margin-top: 10px;
width: 550px;
height: 400px;
border: 1px solid #818181;
box-sizing: border-box;
}
.auto {
width: 500px;
height: 50px;
margin-left: 25px;
margin-top: 30px;
border: 1px solid #848484;
box-sizing: border-box;
}
.select {
width: 500px;
height: 250px;
margin-left: 25px;
margin-top: 30px;
border: 1px solid #848484;
box-sizing: border-box;
}
.spanlist {
display: inline-block;
margin: 10px 10px;
text-align: center;
line-height: 25px;;
background: silver;
color: black;
padding: 2px 5px;
}
.spanlistt {
display: inline-block;
margin: 10px 5px;
text-align: center;
line-height: 25px;;
background: silver;
color: black;
padding: 2px 5px;
}
</style>
</head>
<body>
<div class="block">
<div class="top">
<span>省：</span>
<input class="input" type="text" list="sheng"/>
<datalist id="sheng"></datalist>
</div>
<div class="bottom">
<div class="auto"></div>
<div class="select"></div>
</div>
</div>
<script>
/**
* Created by Administrator on 2019/6/7 0007.
*/
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"
}
]
}
]
}
]
}
]
</script>
<script>
var city = {
allData: data,
citylist: [],
sheng: document.querySelector("#sheng"),
txtinput: document.querySelector(".input"),
select: document.querySelector(".select"),
auto: document.querySelector(".auto"),
createsheng: function () {
for (var i = 0; i < this.allData.length; i++) {
var option = new Option(i, this.allData[i].name);
this.sheng.appendChild(option);
}
},
addEvent: function () {
var that = this;
that.txtinput.onchange = function () {
that.select.innerHTML = "";
that.auto.innerHTML = "";
var name = this.value;
that.allData.forEach(function (val) {
if (val.name == name) {
that.citylist.push(val);
}
});
that.writeshi();
}
},
writeshi: function () {
this.select.innerHTML = "";
var opt = this.citylist[this.citylist.length - 1];
for (key in opt.child) {
var span = document.createElement("span");
span.className = "spanlist";
span.innerHTML = opt.child[key].name;
this.select.appendChild(span);
}
// for (i = 0; i < opt.child.length; i++) {
// var span = document.createElement("span");
// span.className = "spanlist";
// span.innerHTML = opt.child[i].name;
// this.select.appendChild(span);
// }
this.SpanEvent(opt);
},
SpanEvent: function (object) {
var that = this;
var spanlist = document.querySelectorAll(".spanlist");
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;
that.auto.appendChild(this);
that.writeshi();
}
}
that.addclose();
},
addclose: function () {
var that = this;
var close = document.querySelectorAll(".close");
var spanlistt = document.querySelectorAll(".spanlistt");
for (var i = 0; i < close.length; i++) {
close[i].index = i;
if (i == close.length - 1) {
close[i].onclick = function () {
spanlistt[this.index].remove();
that.citylist.pop(this);
that.writeshi();
}
}
else{
close[i].onclick=function(){
that.citylist.splice(this.index+1,that.citylist.length-1);
console.log(that.citylist);
spanlistt[this.index].remove();
for(i=spanlistt.length-1;i>this.index;i--){
spanlistt[i].remove();
}
that.writeshi();
}
}
}
}
};
city.createsheng();
city.addEvent();
</script>
</body>
</html>
- for 循环和for in的区别
如下图所示的两种遍历方式
使用for循环，当点击opt集合的最后一位时，程序会报错。
使用for in遍历，不会报错，是因为ECMAScript5对于迭代的对象的变量值为null或者undefined这种情况下，for in语句不会抛出错误，直接不执行循环体，跳出循环。
2.当在中间栏点击关闭时，只能按顺序点击，不然显示会出现错乱，这个原因是没有判断，直接使用pop方法删除数组最后一个
解决方法是：使用splice截取数组（splice方法截取对原数组有影响），只剩下需要的部分，其余的移除。如图所示：
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
