需求
通过三个下拉菜单的联动来实现,第一级下拉菜单为省级,第二级下拉菜单为市级,第三级下拉菜单为区级。当点击第一级下拉菜单,第二级菜单的内容会自动匹配:选择第二级菜单时,第二级菜单会自动生成。当我取消上一级菜单的选项时,次一级选项会自动消失。
原理
利用数组存储数据,再创建函数来控制二三级下拉菜单。
代码
<!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">
<style>
*{
margin: 0;
padding: 0;
}
.top{
height: 150px;
background-color: black;
color: white;
font-size: 50px;
text-align: center;
line-height: 150px;
margin-bottom: 100px;
}
</style>
<title>Document</title>
</head>
<body>
<div class="top">省市区三级联动</div>
<select id="province">
<option value="-1">请选择</option>
</select>
<select id="city"></select>
<select id="country"></select>
<script>
var provinceArr = ['江苏','辽宁','福建']
var cityArr = [
['无锡市','连云港市','宿迁市'],
['盘锦市','葫芦岛市','辽阳市'],
['厦门市','莆田市','平潭综合实验区']
]
var countryArr = [
[
['滨湖区','梁溪区','新吴区','锡山区','惠山区','江阴市','宜兴市'],
['海州区','连云区','赣榆区','东海县','灌云县','灌南县'],
['宿城区','宿豫区','沭阳县','泗阳县','泗洪县']
],
[
['双台子区','兴隆台区','大洼区','盘山县'],
['连山区','龙港区','南票区','兴城市','绥中县','建昌县'],
['白塔区','文圣区','宏伟区','弓长岭区','太子河区','灯塔市','辽阳县']
],
[
['思明区','海沧区','湖里区','集美区','同安区','翔安区'],
['城厢区','涵江区','荔城区','秀屿区','仙游县'],
['平潭县']
]
]
function createOption(obj,data){
for(var i in data){
var op = new Option(data[i],i);
obj.options.add(op);
}
}
var province = document.getElementById('province'); //获取省份对象
createOption(province,provinceArr);
//选择省份后,自动生成对应城市的下拉菜单
var city = document.getElementById('city'); //获取城市下拉菜单的元素对象
province.onchange = function(){
city.options.length = 0; //清空city下的所有原有option
createOption(city,cityArr[province.value]);
if(province.value >=0){
city.onchange();
}else{
country.options.length = 0;
}
}
//选择城市后,自动生成对应区域的下拉菜单
var country = document.getElementById('country'); //获取区域下拉菜单的对象
city.onchange = function(){
country.options.length = 0;
createOption(country,countryArr[province.value][city.value]);
};
</script>
</body>
</html>
效果