初学Js-省市联动基本概念-事件编程

最新推荐文章于 2025-03-20 15:38:01 发布

原创最新推荐文章于 2025-03-20 15:38:01 发布 · 192 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#省市联动 #javascript #事件编程

web前端专栏收录该内容

9 篇文章

订阅专栏

简单的下拉菜单选择省份，自动弹出这个省份的市级。可将该程序继续扩展到省市县三级联动！

<html>
<head>
	<title>事件编程</title>
</head>
<script type="text/javascript">

		function testChange(){
			//获取被选中的内容
			var jiguan=document.getElementById("jiguan").value;
			var city=document.getElementById("city");
			//每次要先清空城市select的内容，否则+=会累计
			city.innerHTML="";
			if(jiguan=="甘肃"){
				//把一些option的选项放到城市的select中。
				var arr=["酒泉","兰州","敦煌"];
				for(var i=0;i<arr.length;i++){
					city.innerHTML+="<option value='"+arr[i]+"'>"+arr[i]+"</option>";
					//+=代表，有几个就拼几个进去，拼起来！
				}
			}else if(jiguan=="湖南"){
				var arr=["长沙","常德","湘潭"];
				for(var i=0;i<arr.length;i++){
					city.innerHTML+="<option value='"+arr[i]+"'>"+arr[i]+"</option>";
				}				
			}else if(jiguan=="四川"){
				var arr=["成都","绵阳","都江堰"];
				for(var i=0;i<arr.length;i++){
					city.innerHTML+="<option value='"+arr[i]+"'>"+arr[i]+"</option>";
				}				
			}
		}
</script>
<body>
<select onchange="testChange()" id="jiguan">
	<option value="甘肃">甘肃</option>
	<option value="湖南">湖南</option>
	<option value="四川">四川</option>
</select>
<select id="city">
</select>
</body>
</html>