根据第一个下拉列表的值改变另一个下拉列表内容（省市联动）

2024年5月18日 152次阅读 来源: 有劲儿. 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<form action=" " method="post" name="myform">
			
		<!-- 创建一号下拉列表 设置Id“sel1” 并插入函数 “changecity( )”：值变动时触发 -->

		<select id="sel1" onchange="changecity( ) ">
		<option>--省份--</option>
		<option>江苏省</option>
		<option>浙江省</option>
		<option>安徽省</option>
		</select>
		
		<!-- 创建二号下拉列表 设置Id“sel2” -->

		<select id="sel2">
		<option>--市--</option>
		</select>
		
		</form>


		<!-- 编写js -->

		<script type="text/javascript">


			// 定义函数“changecity( )”：

			function changecity(){

				// 创建二号下拉菜单所需选项内容的数组

				var a0="<option>--市--</option>"
				var a1=["南京市","苏州市","常州市","南通市"];
				var a2=["杭州市","温州市","嘉兴市","绍兴市"];
				var a3=["合肥","马鞍山","蚌埠市","芜湖市"];
				
				// 通过ID获取一号下拉列表的值,并对值进行筛选
				
				switch (document.getElementById("sel1").value){
					
					// 根据一号列表的值选择二号下拉菜单的对应数组

					case "江苏省": a=a1; break;
					case "浙江省": a=a2; break;
					case "安徽省": a=a3; break;
				}

				//利用增强for 将内容填充到 option选项中

				for(i in a){
					var e="<option>"+a[i]+"</option>"

					// 将option进行累加

					a0+=e;
					}

				// 将累加值赋给二号下拉列表

				d=document.getElementById("sel2");
				d.innerHTML=a0;
			 } 
		</script>
	</body>
</html>

    原文作者：有劲儿.
    原文地址: https://blog.csdn.net/m0_64395767/article/details/122188377
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞