三级联动

最新推荐文章于 2025-05-28 09:35:15 发布

雨夜星辰03

最新推荐文章于 2025-05-28 09:35:15 发布

阅读量213

点赞数

CC 4.0 BY-SA版权

分类专栏： html+css

本文链接：https://blog.youkuaiyun.com/QWERTY1994/article/details/79919596

html+css 专栏收录该内容

15 篇文章

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		国家:
		<select id="s1" onchange="s1select(this)">
			<option></option>
		</select>
		省份:
		<select id="s2" onchange="s2select(this)">
			<option></option>
		</select>
		
		城市:
		<select id="s3">
			<option></option>
		</select>
		<script>
			s1=[{'code':'001','name':'中国','parentCode':'-1'},
				{'code':'002','name':'美国','parentCode':'-1'}];
			s2 = [{'code':'001001','name':'北京','parentCode':'001'},
				{'code':'001002','name':'广东','parentCode':'001'},
				{'code':'001003','name':'江西','parentCode':'001'},
				{'code':'002001','name':'华盛顿','parentCode':'002'}];
			s3 = [{'code':'001001001','name':'天安门','parentCode':'001001'},
				{'code':'001002001','name':'深圳','parentCode':'001002'},
				{'code':'001003001','name':'吉安','parentCode':'001003'},
				{'code':'002001001','name':'旧金山','parentCode':'002001'}];
				window.onload=function(){
					var s1Ele = document.getElementById("s1");
					var html = "<option>---请选择---</option>";
					for (var i=0;i<s1.length;i++){
						html += "<option value='"+s1[i].code+"'>"+s1[i].name+"</option>";
					}
					s1Ele.innerHTML =html;
					
				}
				
				function s1select(thisObj){
					var index = thisObj.selectedIndex; // 选中索引
					var value = thisObj.options[index].value; // 选中值
					if(!value){
						return false;
					}
					var html="<option>---请选择---</option>";
					for(var i=0;i<s2.length;i++){
						if(s2[i].parentCode == value){
							html += "<option value='"+s2[i].code+"'>"+s2[i].name+"</option>";
						}
					}
					document.getElementById("s2").innerHTML =html;
					document.getElementById("s3").innerHTML ="<option>---请选择---</option>";
				}
				
				
				function s2select(thisObj){
					var index = thisObj.selectedIndex; // 选中索引
					var value = thisObj.options[index].value; // 选中值
					if(!value){
						return false;
					}
					var html="<option>---请选择---</option>";
					for(var i=0;i<s3.length;i++){
						if(s3[i].parentCode == value){
							html += "<option value='"+s3[i].code+"'>"+s3[i].name+"</option>";
						}
					}
					document.getElementById("s3").innerHTML =html;
				}
		</script>
	</body>
</html>