HTML选择框的联动模板

最新推荐文章于 2024-09-24 08:37:02 发布

GoCZ

最新推荐文章于 2024-09-24 08:37:02 发布

阅读量2.4k

点赞数

分类专栏： HTML

本文链接：https://blog.csdn.net/qq_40551994/article/details/90674203

版权

HTML 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

以省市为例：

在这里插入代码片
```<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>省市联动</title>
	</head>
	<body onload="add()">
		
		
		<select name="" id="province" onchange="setCity()">
			
		</select>省
		&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
		<select name="" id="city" >
			
		</select>市
		
		
	
	
	<script type="text/javascript">
		<!-- 设置省市信息 -->
		var provinceList=['河南','山西','河北'];
		var cityList=[['郑州','驻马店','许昌'],['太原','大同','晋中'],['唐山','石家庄','邢台']];
		
		
		//使得页面打开就填充省数据
		function add(){
			var sel=cz("province");
		//遍历,添加到省数据里
		for(var i=0;i<provinceList.length;i++){
			 var op=document.createElement("option");
			 op.text=provinceList[i];
			 sel.add(op);
		}
		}
	
	
		
		
		//设置city select内容
			function setCity(){
				//获取选中的省级列表index
				var sel=cz("province");
				// alert(sel.selectedIndex);
				
				//通过省级列表index 获取市级列表集合
				var ccList=cityList[sel.selectedIndex];
				
				//清空city select 中的option
				cz("city").innerHTML=" ";
				
				遍历cityList  将内容设置进入city select
				for(var i=0;i<ccList.length;i++){
					var op=document.createElement("option");
					op.text=ccList[i];
					cz("city").add(op);
					
					
				}
				
			}
				function cz(id){
					return document.getElementById(id);	
				}
				
			
	</script>
	
	</body>
</html>