分层列表
三层关联下拉列表的编程思路：
来源：(http://blog.sina.com.cn/s/blog_4f9ce8f30100ip1u.html) - JAVA软件工程师--关联下拉列表（JavaScript)_徐亮Bright_新浪博客
本例子是两次关联，对于三层的，情况类似。如要降低编程难度，可以考虑用onblur="f()"和加if-else判断解决。当用户选择了第二层的选项离开后，调用f()函数。该函数通过var obj3=document.getElementById(); var index=obj3.options.selectedIndex得到选择的下标index.这样分解后，就变为二层关联问题。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>relatedSelect.html</title>
<style>
#dhead {
font-size: 20;
background-color: red;
color: green;
width: 400;
height: 300;
}
#dfirst {
background-color: blue;
width: 400;
height: 70;
}
#dsecond {
background-color: yellow;
width: 400;
height: 240;
}
</style>
<script>
var arr=new Array();
arr[0]=[new Option("--方向--","-1")];
arr[1]=[new Option("图形计算","10"),new Option("科学计算","11"),new Option("软件工程","12")];
arr[2]=[new Option("商务英语","20"),new Option("对外英语","21")];
function cc(index){
alert(index);
var obj2=document.getElementById('s2');
var len=arr[index].length;
alert("len:"+len);
obj2.options.length=len;
alert(obj2.options.length);
for(var i=0;i<len;i++){
obj2.options[i]=arr[index][i];
alert(obj2.options[i]);
}
}
</script>
</head>
<body>
<div id="head">
<div id="dfirst" style="font-size:30px">关联下拉列表</div>
<div id="dsecond">
<form>
<select name="major" id="s1" onchange="cc(this.selectedIndex);">
<option value="major">--专业--</option>
<option value="computer">计算机</option>
<option value="english">英语 </option>
</select>
<select name="direction" id="s2">
<option value="-1">--方向--</option>
</select>
</form>
</div>
</div>
</body>
</html>
来源：(http://blog.sina.com.cn/s/blog_4f9ce8f30100ip1u.html) - JAVA软件工程师--关联下拉列表（JavaScript)_徐亮Bright_新浪博客
本例子是两次关联，对于三层的，情况类似。如要降低编程难度，可以考虑用onblur="f()"和加if-else判断解决。当用户选择了第二层的选项离开后，调用f()函数。该函数通过var obj3=document.getElementById(); var index=obj3.options.selectedIndex得到选择的下标index.这样分解后，就变为二层关联问题。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>relatedSelect.html</title>
<style>
#dhead {
font-size: 20;
background-color: red;
color: green;
width: 400;
height: 300;
}
#dfirst {
background-color: blue;
width: 400;
height: 70;
}
#dsecond {
background-color: yellow;
width: 400;
height: 240;
}
</style>
<script>
var arr=new Array();
arr[0]=[new Option("--方向--","-1")];
arr[1]=[new Option("图形计算","10"),new Option("科学计算","11"),new Option("软件工程","12")];
arr[2]=[new Option("商务英语","20"),new Option("对外英语","21")];
function cc(index){
alert(index);
var obj2=document.getElementById('s2');
var len=arr[index].length;
alert("len:"+len);
obj2.options.length=len;
alert(obj2.options.length);
for(var i=0;i<len;i++){
obj2.options[i]=arr[index][i];
alert(obj2.options[i]);
}
}
</script>
</head>
<body>
<div id="head">
<div id="dfirst" style="font-size:30px">关联下拉列表</div>
<div id="dsecond">
<form>
<select name="major" id="s1" onchange="cc(this.selectedIndex);">
<option value="major">--专业--</option>
<option value="computer">计算机</option>
<option value="english">英语 </option>
</select>
<select name="direction" id="s2">
<option value="-1">--方向--</option>
</select>
</form>
</div>
</div>
</body>
</html>