了解简单三级联动
带你了解简单三级联动
思想：当选择省时，创建对应的市子对象，并将其加入父元素中。当选择某一个市时，创建对应的区子对象，并将其加入父元素中。当选择其他省/市时，对应的市、区/区的选项都变为请选择。要注意：在每次重新选择时，需要将其余select标签的options元素的长度为1，即做一次清空。
具体的步骤
1.使用 js 直接加载城市信息；（具体js代码如下）
var city = [{
"id": 10001,
"name": "湖北省",
"child": [{
"id": 100011,
"name": "武汉市",
"child": [{
"id": 100011,
"name": "洪山区"
},
{
"id": 100011,
"name": "江汉区"
},
{
"id": 100011,
"name": "武昌区"
}
]
},
{
"id": 100012,
"name": "襄阳市",
"child": [{
"id": 100012,
"name": "樊城区"
},
{
"id": 100012,
"name": "老城区"
}
]
}
]
},
{
"id": 10002,
"name": "海南省",
"child": [{
"id": 100021,
"name": "海口市",
"child": [{
"id": 100021,
"name": "美兰区"
},
{
"id": 100021,
"name": "琼山区"
},
{
"id": 100021,
"name": "秀英区"
},
{
"id": 100021,
"name": "龙华区"
}
]
},
{
"id": 100022,
"name": "三亚市",
"child": [{
"id": 100022,
"name": "天涯区"
},
{
"id": 100022,
"name": "大东海旅游区"
},
{
"id": 100022,
"name": "蜈支洲旅游景区"
}
]
}
]
}
]
2.页面设计,搭建框架
<div>
省：<select class="sheng">
<option>
-请选择-
</option>
</select>
市：<select class="shi">
<option>
-请选择-
</option>
</select>
区：<select class="qu">
<option>
-请选择-
</option>
</select>
</div>
3.HTML 触发点击事件，直接获取js中的城市数据 ,给省份和城市绑定change事件.
具体实现
3.1.首先遍历所有的省份基本数据，把所有的省份添加到下拉框中。
3.2然后，给省份绑定onchange事件,实现当省份改变时，遍历所有市级数据，把所有的市添加到对应的下拉框中。
3.3最后，给市绑定onchange事件,实现当市改变时，遍历所有区级数据，把所有的区添加到对应的下拉框中。
4.完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body {
background-color: pink;
}
div {
margin: 50px auto;
text-align: center;
}
</style>
</head>
<body>
<div>
省：<select class="sheng">
<option>
-请选择-
</option>
</select>
市：<select class="shi">
<option>
-请选择-
</option>
</select>
区：<select class="qu">
<option>
-请选择-
</option>
</select>
</div>
<script>
var city = [{
"id": 10001,
"name": "湖北省",
"child": [{
"id": 100011,
"name": "武汉市",
"child": [{
"id": 100011,
"name": "洪山区"
},
{
"id": 100011,
"name": "江汉区"
},
{
"id": 100011,
"name": "武昌区"
}
]
},
{
"id": 100012,
"name": "襄阳市",
"child": [{
"id": 100012,
"name": "樊城区"
},
{
"id": 100012,
"name": "老城区"
}
]
}
]
},
{
"id": 10002,
"name": "海南省",
"child": [{
"id": 100021,
"name": "海口市",
"child": [{
"id": 100021,
"name": "美兰区"
},
{
"id": 100021,
"name": "琼山区"
},
{
"id": 100021,
"name": "秀英区"
},
{
"id": 100021,
"name": "龙华区"
}
]
},
{
"id": 100022,
"name": "三亚市",
"child": [{
"id": 100022,
"name": "天涯区"
},
{
"id": 100022,
"name": "大东海旅游区"
},
{
"id": 100022,
"name": "蜈支洲旅游景区"
}
]
}
]
}
]
var sheng = document.getElementsByClassName("sheng")[0];
var shi = document.getElementsByClassName("shi")[0];
var qu = document.getElementsByClassName("qu")[0];
var nowShengIndex = 0;
for (var i = 0; i < city.length; i++) {
var optEle = new Option(city[i].name, i);
console.log(optEle.innerHTML);
sheng.appendChild(optEle)
}
sheng.onchange = function () {
shi.options.length = 1;
qu.options.length = 1;
//this.value可取到当前所选值对应的索引
for (var i = 0; i < city[this.value].child.length; i++) {
var optEle = new Option(city[this.value].child[i].name, i);
shi.appendChild(optEle)
}
nowShengIndex = this.value;
};
shi.onchange = function () {
qu.options.length = 1;
console.log(qu);
for (var i = 0; i < city[nowShengIndex].child[this.value].child.length; i++) {
var optEle = new Option(city[nowShengIndex].child[this.value].child[i].name, i);
qu.appendChild(optEle)
}
}
</script>
</body>
</html>
知识点：
① 在创建标签的子元素时，可采用new Option(innerHTML,value)的方式。每次可通过option的value值来对应到所选数据在json串中的位置。从而将其余的子元素内容变为所选择的对应的children内容。
② 想要删除的子元素时，可采用让对象.options.length=1的方式。
若想要让sheng对象的子元素option的长度为1，则：sheng.options.length=1;注意： 不能用 sheng.children.length=1，children.length不可被修改
③ 监听select标签的选中元素变化事件为：对象名.οnchange=function(){]
2330
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
