一、省市区三级联动要求
通过三个下拉菜单的联动来实现,第一级下拉菜单为省级,第二级下拉菜单为市级,第三级下拉菜单为区级
当点击第一级下拉菜单,第二级菜单的内容会自动匹配:选择第二级菜单时,第三级菜单会自动生成。
当我取消上一级菜单的选项时,次一级选项会自动消失。
二、实验原理
- 巧妙地运用了一维数组,还利用js数组名称可为汉字,
- 运用了两个函数,onchange,当其value值改变的时候,他会执行自己所书写的代码
三、实验效果
省市区三级联动
四、原代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
padding: 0%;
margin: 0%;
}
.box{
position: absolute;
top:40%;
left:40%;
}
select{
width: 250px;
height: 50px;
border-radius: 10px;
margin-left: 15px;
font-size: 25px;
text-align: center;
}
select.value{
font-size: 25px;
}
option{
font-size: 25px;
}
p{
font-size: 50px;
}
span{
font-size: 35px;
margin-left: 15px;
}
</style>
</head>
<body>
<div class="box">
<p >地区:</p>
<select id="provience" size="1">
<option value="-1" >请选择</option>
</select>
<span>省</span>
<select id="cite">
<option value="-1" >请选择</option>
</select><span>市</span>
<select id="contry">
<option value="-1" >请选择</option>
</select><span>区</span>
</div>
<script>
var provience = document.querySelector("#provience")
var cite = document.querySelector("#cite")
var contry = document.querySelector("#contry")
var provienceArr = ['贵州','四川','江苏']
var citeArr = new Array();
var contryArr = new Array()
//创建以省为标签的数组
citeArr['贵州'] = ['贵阳','遵义','毕节']
citeArr['四川'] = ['成都','资阳']
citeArr['江苏'] = ['南京','扬州']
//创建以市为标签的数组
contryArr['贵阳'] = ['花溪','乌当','云岩']
contryArr['遵义'] = ['红花岗','汇川','播州']
contryArr['毕节'] = ['辖七星关','大方','黔西']
contryArr['成都'] = ['武侯','锦江','青羊']
contryArr['资阳'] = ['雁江','天体','纳怕']
contryArr['南京'] = ['江宁','六合','溧水']
contryArr['扬州'] = ['邗江','广陵','江都']
for(let i in provienceArr) {
provience.add(new Option(provienceArr[i],provienceArr[i]))//new OPtion(text(属性名称),value(值))
}
//定义一个函数,使得创建城市与区下的option
function creatOption(obj,data){
for(var i in data){
var place = new Option(data[i],data[i])
obj.add(place);
}
}
//利用一个函数(onchange),当期内部value变化的时候,其会跟着进行自己所写的函数
//创建区
cite.onchange = function(){
contry.length = 0;
creatOption(contry,contryArr[cite.value])
}
//创建市
provience.onchange = function(){
cite.length = 0;
creatOption(cite,citeArr[provience.value])
cite.onchange()
}
</script>
</body>
</html>