js原生代码实现三级联动

我自己觉得实现联动,不管是几级联动都需要先规划好数据类型,理清数据中的逻辑关系,在js中明白每一步拿到的是哪一层中的什么值(索引值还是属性值),不熟练的话可以自己打印出来查看:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>三级联动</title>
</head>
<body>
<select name="" id="provinces">
<option value="请选择一个省份">请选择一个省份</option>
</select>    
<select name="" id="cities">
<option value="请选择一个城市">请选择一个城市</option>
</select>    
<select name="" id="countries">
<option value="请选择一个区">请选择一个区</option>
</select>
</body>
<script>
var pro = document.getElementById("provinces");
var cit = document.getElementById("cities");
var country = document.getElementById("countries");//取到三个对象
var data = { 
'江苏省': {
	'南京': ['玄武区', "江宁区", "秦淮区"],
	'苏州': ["昆山", "常熟", "吴江", "太仓"],
	'徐州': ["鼓楼区", "泉山区","贾汪区","铜山区"]
	},
'浙江省': {
	"温州": ["楠溪江", "泽雅", "大罗山"],
	"杭州": ["临安", "桐庐","建德","淳安"],
	"宁波": ["江北区", '海曙区','江北区','北仑区','镇海区','鄞州区','奉化区']
	}    
	}    
for (var i in data) {
	pro.add(new Option(i, i));    
	}//添加省份
pro.onchange = function () {        
		cit.length = 1;
		for (var j in data[pro.value]) {
		cit.add(new Option(j, j));
		}
	}//添加对应省份下的城市
cit.onchange = function () {
	country.length = 1;
	for (var k in data[pro.value][cit.value]){
	country.add(new Option(data[pro.value][cit.value][k], data[pro.value][cit.value][k]));        		}    
	}//添加对应省份对应城市下的区
</script>
</html>

具体代码如上,有什么问题留言评论,看到一定会第一时间回复。

你可能感兴趣的:(web前端,javascript)