JavaScript二级级联菜单

Eric实验室 2011-08-11

<html>
	<head></head>
		
	<body>
		<script>
		  //创建两个字符串
			var sx = "[{'levelId':100101,'levelName':'坐席'},{'levelId':100102,'levelName':'团队长'},{'levelId':100103,'levelName':'部经理'}]";
			var fw = "[{'levelId':100201,'levelName':'市场经理'},{'levelId':100202,'levelName':'市场经理助理'}]";
			function changeEmpType(empTypeId){
				document.getElementById("level").options.length = 0;
				var ob = 0;
				//根据人员类别决定将要把那种对象数组里面的值写入第二个SELECT中
				if(empTypeId == '1001'){
					//将字符串装换为对象并赋值
					ob = eval("("+sx+")");
				}else if(empTypeId == '1002'){
				  //将字符串装换为对象并赋值
					ob = eval("("+fw+")");
				}
				var option = new Option("请选择",0);
				if(ob != 0){
					for(var j in ob){
						option = new Option(ob[j].levelName,ob[j].levelId);
						document.getElementById("level").options.add(option);
					}
				}else{
					document.getElementById("level").options.add(option);
				}
			}
		</script>
		
		<select name="empType" id="empType" onchange="changeEmpType(this.value)">
			<option>请选择</option>
			<option value="1001">销售系列</option>
			<option value="1002">服务系列</option>
		</select>
		
		<select name="level" id="level">
			<option>请选择</option>
		</select>
	</body>
</html>

-------------------------------------------------------------------------------------

<html>
	<head></head>
		
	<body>
		<script>
			//创建两种类型的对象数组,sx对应销售系列,fw对应服务系列
			var sx = [{'levelId':100101,'levelName':'坐席'},{'levelId':100102,'levelName':'团队长'},{'levelId':100103,'levelName':'部经理'}];
			var fw = [{'levelId':100201,'levelName':'市场经理'},{'levelId':100202,'levelName':'市场经理助理'}];
			function changeEmpType(empTypeId){
				document.getElementById("level").options.length = 0;
				var ob = 0;
				//根据人员类别决定将要把那种对象数组里面的值写入第二个SELECT中
				if(empTypeId == '1001'){
					ob = sx;
				}else if(empTypeId == '1002'){
					ob = fw;
				}
				var option = new Option("请选择",0);
				if(ob != 0){
					for(var j in ob){
						option = new Option(ob[j].levelName,ob[j].levelId);
						document.getElementById("level").options.add(option);
					}
				}else{
					document.getElementById("level").options.add(option);
				}
			}
		</script>
		
		<select name="empType" id="empType" onchange="changeEmpType(this.value)">
			<option>请选择</option>
			<option value="1001">销售系列</option>
			<option value="1002">服务系列</option>
		</select>
		
		<select name="level" id="level">
			<option>请选择</option>
		</select>
	</body>
</html>

相关推荐