JavaScript+HTML实现简单的省市二级联调

最新推荐文章于 2021-09-01 13:39:57 发布

weihubeats

最新推荐文章于 2021-09-01 13:39:57 发布

阅读量927

点赞数

CC 4.0 BY-SA版权

分类专栏： # JSP 文章标签： HTML JavaScript 省市联调

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.youkuaiyun.com/qq_42651904/article/details/81708283

JSP 专栏收录该内容

10 篇文章

订阅专栏

本文提供了一个使用纯JavaScript实现的简单省市联动下拉菜单示例。通过选择省份，相应的城市列表会动态更新。该示例适用于网页表单，能够帮助用户快速定位到所需的城市。

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

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>简单的省市联调</title>
</head>
<body>
	
</body>
</html>
<script>
var provinces = ['请选择城市','湖北省','湖南省'];
var city1 = ['武汉市','荆州市','襄阳市'];
var city2 = ['长沙市','岳阳市','湘潭市'];

//生成有数据的省的下拉框
document.write("<select name='selPro' onchange='showCity(this)'>");
for(var i = 0;i<provinces.length;i++){
	document.write("<option value='"+i+"'>"+provinces[i]+"</option>");		
}
document.write("</select>");
document.write("<select name='selCity'></select>");

//将HTML写入到select中实现调用
function showCity(obj){
	var content = "";
	if(obj.value==1){
		for(var i = 0;i<city1.length;i++){
			content = content + "<option value='"+i+"'>"+city1[i]+"</option>";
		}
	}else if(obj.value==2){
		for(var i = 0;i<city2.length;i++){
			content = content + "<option value='"+i+"'>"+city2[i]+"</option>";
		}
	}
	document.getElementsByName("selCity")[0].innerHTML = content;
}
</script>