三级下拉菜单 - HTML

只考虑结果未考虑代码的尊严...
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>三级下拉菜单</title>
		<script>
			var qinghua = {
			name : "河北",
			111 : {id:"石家庄","长安区":0,"桥东区":0,"桥西区":0,"新华区":0}, 
			112 : {id:"唐山","路南区":0,"路北区":0,"古冶区":0}
		};   
			var beida = {
			name : "山西",
 			 221 : {id:"太原","迎泽区":0,"万柏林区":0}, 
 			 222 : {id:"大同","阳泉":0,"城区":0,"矿区":0,"南郊区":0}
		};  
		var city = [qinghua,beida];
		
		window.onload = function(){
			var one = document.getElementById("one");
			for(var i in city){
				one.add(new Option(city[i].name,city[i].name),null);
			}
		}
		
		function onechange(){
			var onevalue = document.getElementById("one").value;
			var two = document.getElementById("two");
			two.options.length = 1;
			for(var i in city){
				if(city[i].name == onevalue){
					for(var j in city[i]){
						if(j != "name"){
							two.add(new Option(city[i][j].id,city[i][j].id),null);
						}
					}
				}
			}
		}
		
		function twochange(){
			var onevalue = document.getElementById("one").value;
			var twovalue = document.getElementById("two").value;
			var three = document.getElementById("three");
			three.options.length = 1;
				for(var i in city){
				if(city[i].name == onevalue){
					for(var j in city[i]){
						if(j != "name"){
							if(city[i][j].id == twovalue){
								for(var k in city[i][j]){
									if(k != "id"){
										three.add(new Option(k,k),null);
									}
								}
								}
							}
						}
					}
				}
			}
		
		
		
		</script> 
	</head>
	<body> 
		<span>one:</span> 
		<select id="one" onchange="onechange()">
			<option>请选择</option>
		</select>
		<br />
		<span>two:</span>
		<select id="two" onchange="twochange()">
			<option>请选择</option>
		</select>
		<br />
		<span>three:</span>
		<select id="three">
			<option>请选择</option>
		</select>
	</body> 
</html>
三级下拉菜单 - HTML

猜你喜欢
