js实现省市级联的简单代码

最新推荐文章于 2019-12-04 17:33:16 发布

lettuce_

最新推荐文章于 2019-12-04 17:33:16 发布

阅读量4.3k

点赞数 1

分类专栏： html js 文章标签： js 省市级联简单版

本文链接：https://blog.youkuaiyun.com/lettuce_/article/details/79942116

版权

html 同时被 2 个专栏收录

5 篇文章

订阅专栏

4 篇文章

订阅专栏

本文展示了一段简单的JavaScript代码，用于实现网页上的省市级联选择功能。通过创建城市列表并根据选择的省份动态加载对应城市，实现了动态联动的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>省市级联</title>

<script type="text/javascript">
	var cityList=new Array();//构建城市列表,城市太多,这里只简单写几个
	cityList["北京市"]=['海淀区','朝阳区','密云区'];
	cityList["上海市"]=['徐汇区','黄埔区','虹口区'];
	cityList["吉林省"]=['长春市','吉林市','四平市'];
	
	function allprovince(){
		//获取省的select对象
		var province=document.getElementById("province");
		for (var i in cityList){
			province.add(new Option(i,i),null);
			}
		}
		
		
	//根据省份加载对应的城市
	function loadCity(){
		
			//获取省份的值
			var province=document.getElementById("province").value;
			//获取城市的对象
			var city=document.getElementById("city");
			
			//清空上一次选择省份显示的城市
			city.options.length=0;
			
			for(var i in cityList){
				//让其对应
				if(i==province){
					for(var j in cityList[i]){
						city.add(new Option(cityList[i][j],cityList[i][j]),null);
						}
					}
				}
			}
	window.οnlοad=allprovince;
</script>

</head>

<body>
省份选择:<select id="province" onChange="loadCity();">
<option>--请选择省份--</option>
</select>

城市选择:<select id="city">
<option>--请选择城市--</option>
</select>



</body>
</html>