Js三级联动例子

最新推荐文章于 2022-06-17 21:56:23 发布

浮桥_sj

最新推荐文章于 2022-06-17 21:56:23 发布

阅读量515

点赞数 1

分类专栏：前端开发

本文链接：https://blog.csdn.net/u012390990/article/details/12911671

版权

前端开发专栏收录该内容

1 篇文章 0 订阅

订阅专栏

用JS练习的一个三级联动例子，纯当练手用。

<html>
<head>
<script type="text/javascript">
var citys=new Array();
var provinces=new Array("beijing","hebei","henan");
citys[0]=new Array("beijing","haidian","海淀");
citys[1]=new Array("beijing","changping","昌平");
citys[2]=new Array("beijing","chaoyang","朝阳");
citys[3]=new Array("hebei","langfang","廊坊");
citys[4]=new Array("hebei","shijiazhuang","石家庄");
citys[5]=new Array("hebei","cangzhou","沧州");
citys[6]=new Array("henan","zhumadian","驻马店");
citys[7]=new Array("henan","xinxiang","新乡");
citys[8]=new Array("henan","zhengzhou","郑州");
var countys=new Array();
countys[0]=new Array("zhumadian","pingyu","平舆");
countys[1]=new Array("zhumadian","runan","汝南");
countys[2]=new Array("haidian","haidian-1","海淀-1");
countys[3]=new Array("shijiazhuang","shijiazhuang-1","石家庄-1");
countys[4]=new Array("cangzhou","runan","沧州-1");
countys[5]=new Array("chaoyang","chaoyang","朝阳");
countys[6]=new Array("changping","pingyu","昌平-1");
countys[7]=new Array("zhengzhou","zhengzhou-1","郑州-1");
countys[8]=new Array("langfang","langfang-1","廊坊-1");
countys[9]=new Array("xinxiang","xincai","新乡-1");
function changeCity(value){
	var city=document.getElementById('city');
	city.options.length=0;
	for(i=0;i<citys.length;i++){
		if(citys[i][0]==value){	
			city.options[city.length]=new Option(citys[i][2],citys[i][1]);
		}
	}
	city.options[0].selected="selected";
	changeCounty(city.options[0].value);
}
function changeCounty(value){
	var county=document.getElementById('county');
	county.options.length=0;
	for(i=0;i<countys.length;i++){
		if(countys[i][0]==value){	
			county.options[county.length]=new Option(countys[i][2],countys[i][1]);
		}
	
	}
	county.options[0].selected="selected";
}
</script>
</head>
<body style="text-align:center">
	<select id="province" οnchange="changeCity(this.value)">
		<option value="beijing">北京</option>
		<option value="hebei">河北</option>
		<option value="henan">河南</option>
	</select>
	<select id="city"  οnchange="changeCounty(this.value)">
		<option value="haidian">海淀</option>
	</select>
	<select id="county">
		<option value="haidian">海淀-1</option>
	</select>
</body>
</html>