选择城市的多级联动练习
程序员文章站
2022-06-11 22:23:48
...
下面是我这次的多级联动练习，我觉得最重要的是处理好选择城市时函数的递归应用问题。
1.body内容
<div class="box">
<div class="s1">
请输入您所在省份： <input type="text" id="txt" list="datalist"/>
<!-- list对应datalist的id-->
<datalist id="datalist">
<!--<option value=""></option>-->
</datalist>
<div class="s11">
</div>
</div>
<div class="s2"></div>
</div>
2，css样式
<style>
.box{
width: 500px;
height: 400px;
border:1px solid lightblue;
margin:50px auto;
position:relative;
display:flex;
flex-direction:column;
}
.s1{
width: 100%;
border-bottom:1px solid silver;
flex:0.3;
}
.s1>input{
margin-top:10px;
width: 200px;
height: 20px;
}
.s11{
width:auto;
height:auto;
border:1px solid lightblue;
margin-top:20px;
padding:7px 0;
}
.s2{
width: 100%;
flex:0.7;
}
.s2span{
position:relative;
top:10px;
}
.s2span,.s11span{
position:relative;
background: #dcdcdc;
color: #8c8c8c;
border:1px solid silver;
padding:5px 5px;
margin-left:8px;
}
.del{
width: 15px;
height: 15px;
right:-7px;
position:absolute;
top:-7px;
text-align:center;
line-height:100%;
background: #ec0000;
color:#fff;
border-radius:50%;
}
</style>
3.简单模拟数据(名称都是随意命名的，读者们请不要介意呢)
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"
}
]
}
]
}
]
}
]
4.编辑js脚本
1.获取相关元素
<script>
var content={
all:data,
txt:document.querySelector("#txt"),
datalist:document.querySelector("#datalist"),
s2:document.querySelector(".s2"),
s11:document.querySelector(".s1-1"),
citylist:[],
- 给input添加省并绑定索引
firstadd:function(){
// console.log(this.all);
for(key in this.all){
var opt=new Option(key,this.all[key].name);//option(text,value)
this.datalist.appendChild(opt);
}
},
- (input输入省，s2显示相关市)先将省对象加进数组
pushadd:function(){
// this指content
var that=this;
that.txt.onchange=function(){//onchange是在敲入回车键时的事件
// console.log(this)//this指txt
that.all.forEach(function(val,text){
// console.log(this);//this是window对象
if(val.name==that.txt.value){
that.citylist.push(val);
// console.log(content.citylist);
}
});
content.secondadd();
}
},
- input输入时通过数组citylist取所有的市显示在s2里面
secondadd: function () {
this.s2.innerHTML="";
// console.log(this.citylist[this.citylist.length - 1]);
var a=this.citylist[this.citylist.length - 1];
for(var i=0;i< a.child.length;i++){
span=document.createElement("span");
span.innerHTML=a.child[i].name;
span.className="spanlist";
this.s2.appendChild(span)
content.addspanevent(a);
},
5.点击span（市），市出现在s1文本框里，且s2里出现相应的区
addspanevent:function(x){
var spanlist=document.getElementsByClassName("spanlist");
for(var i=0;i<spanlist.length;i++){
var that=this;
spanlist[i].index=i;//????
spanlist[i].onclick=function(){
//span里的市出现在s11里面，
var lspan=document.createElement("span");
lspan.className="lspan";
that.s11.appendChild(lspan);
lspan.innerHTML=this.innerHTML;
that.s2.innerHTML="";
//lspan里面添加删除符号
var del=document.createElement("span");
del.innerHTML="X";
del.className="del";
lspan.appendChild(del);
//s2呈现相应的下一级
that.citylist.push(x.child[this.index]);
content.secondadd();
}
}
},
- 添加删除事件
deleve:function(){
var del=document.getElementsByClassName("del");
var lspan=document.querySelector(".lspan");
var that=this;
for(var i=0;i<del.length;i++){
del[i].index=i;
del[i].onclick=function(){
lspan[this.index].remove();
that.citylist.pop();
content.secondadd();
}
}
}
};
content.firstadd();
content.pushadd();
content.deleve();
</script>
上一篇： js利用数组做省级联动