欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2024-03-26 08:57:23
...
<!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>