[JS][初学]JSON实现省市二级联

最新推荐文章于 2019-09-22 10:09:49 发布

王康伯巴奇

最新推荐文章于 2019-09-22 10:09:49 发布

阅读量346

点赞数

分类专栏： JS 文章标签： HTML JS

本文链接：https://blog.youkuaiyun.com/David_C_Java/article/details/83759458

版权

JS 专栏收录该内容

2 篇文章

订阅专栏

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>省市级联</title>
</head>

<body onLoad="w_load()">
省：<select id="provsSelect" onChange="selectChanged()" ><option>---请选择---</option></select><br/>
市：<select id="citiesSelect"><option>---请选择---</option></select>
</body>
<script type="text/javascript">
	var data = [{"prov":"广东省","city":["珠海市","佛山市","深圳市","广州市","汕头市"]},
		{"prov":"湖南省","city":["长沙市","常德市","岳阳市"]}];
	//var obj = JSON.parse(data);
function w_load(){
		//找到省的下拉列表的选项
		var provsSelect = document.getElementById("provsSelect");
		//遍历每一个省的数据
		for(var i=0; i<data.length; i++){
			//创建option对象
			provsSelect.options.add(new Option(data[i].prov,null));
		}
	}
	
function selectChanged(){
	var provsSelect = document.getElementById("provsSelect");
	var index = provsSelect.selectedIndex;
	var value = provsSelect.options[index].text;
	alert(value);
	var citiesSelect= document.getElementById("citiesSelect");
	
	//document.write(value);
	switch(value){
		case "广东省":{
			citiesSelect.options.length = 0;
			for(var i=0; i<data[0].city.length; i++){
				citiesSelect.options.add(new Option(data[0].city[i]));
			}
			break;
		}
		case "湖南省":{
			citiesSelect.options.length = 0;
			for(var i=0; i<data[1].city.length; i++){
				citiesSelect.options.add(new Option(data[1].city[i]));
			}
		}
	}
}
</script>
</html>