四十九2

三级联动

使用的三级联动数据

var oProc = [“安徽”,“上海”,“山东”]
var oCity = [
[“合肥”,“淮南”,“芜湖”],
[“浦东”,“闵行”,“浦西”],
[“济南”,“青岛”,“枣庄”]
]
var oDist = [
[
[“政务区”,“庐阳区”,“蜀山区”],
[“田家区”,“大道区”,“九龙岗”],
[“镜湖区”,“鸠江区”,“三山区”]
],
[
[“浦东1”,“浦东2”,“浦东3”],
[“闵行1”,“闵行2”,“闵行3”],
[“浦西1”,“浦西2”,“浦西3”]
],
[
[“历下区”,“天桥区”,“长清区”],
[“市南区”,“市北区”,“市东区”],
[“薛城区”,“市中区”,“责成区”]
]
];

html部分（三个select标签，第一个和地问个标签中各有显示下一级内容的时间出发函数）

<select name="" id="proc" onchange="showCity()">
		<option value=""></option>
	</select>
	
	<select name="" id="city" onchange="showDist()">
		<option value=""></option>
	</select>
	
	<select name="" id="dist">
		<option value=""></option>
	</select>

js部分

var proc,city,dist;		//  定义三个函数，供获取对象使用
	window.onload = function(){
	//  获取三个select的对象
		 proc = document.getElementById('proc'); 
		 city = document.getElementById('city');
		 dist = document.getElementById('dist');
		
	//   循环将oPero数组中的对象赋给第一个select
		for(var i = 0;i < oProc.length;i++){
			// 创建option元素
			var ele = document.createElement('option');
			//创建文本节点
			var txt = document.createTextNode(oProc[i]);
			// 把文本节点添加到元素节点中
			ele.appendChild(txt);				
			// 把元素节点添加到select标签中
			proc.appendChild(ele);
		}
		
}

		
		//   域内容改变触发函数
		function showCity(){
			if(proc.value == "-1"){	// 如果都没选中，代码不执行
				//每次选择省先清空市
				city.options.length = 1;
				// 每次选择市先清空区
				dist.options.length = 1;
			}else{
				city.options.length = 1;
				dist.options.length = 1;
				//选择哪个省，返回的是当前省被选中的那个索引值，这个值是从1开始的
				var num = proc.options.selectedIndex;
				for(var i= 0;i< oCity[num-1].length;i++){
					//创建元素节点
					var ele = document.createElement('option');
					 //创建文本对象
					var txt = document.createTextNode(oCity[num-1][i]);
					 // 把文本节点添加到元素节点中
					ele.appendChild(txt);				
					// 把元素节点添加到select标签中
					city.appendChild(ele);	
				}
			}	
		}
		
		
		function showDist(){
			if(city.value == "-1"){	// 如果都没选中，代码不执行
				// 每次选择市先清空区
				dist.options.length = 1;
			}else{
				dist.options.length = 1;
				//选择哪个省，返回的是当前省被选中的那个索引值，这个值是从1开始的
				var num = proc.options.selectedIndex;
				//  返回市的索引值
				var num2 = city.options.selectedIndex;
			
				for(var i= 0;i< oDist[num-1][num2-1].length;i++){
					//创建元素节点
					var ele = document.createElement('option');
					 //创建文本对象
					var txt = document.createTextNode(oDist[num-1][num2-1][i]);
					 // 把文本节点添加到元素节点中
					ele.appendChild(txt);				
					// 把元素节点添加到select标签中
					dist.appendChild(ele);	
				}
			}	
		}

没有使用三维数组完成数据