級聯下拉類表（二級）
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<script>
var course = new Array();
course["初級"]=["java基礎上","java基礎下","java核心API","初級專案"];
course["中級"]=["Wed前端技術","oracle資料庫","wed後端技術","中級專案"];
course["高階"]=["Hibernate","Stucts","Spring","高階專案"];
//初始化第一階段的課程
window.onload=function initCourse(){
var firstCourse = document.getElementById("firstCourse");
for(var i in course){
firstCourse.add(new Option(i,i),null);
}
}
//第一階段課程變化了，第二階段的課程級聯變化（onchange()方法）
function changeCourse(){
var cou = document.getElementById("firstCourse").value;
var secondCourse = document.getElementById("secondCourse");
secondCourse.options.length=0;//清空列表
for(var i in course){
if(i==cou){
for(var j in course[i]){
secondCourse.add(new Option(course[i][j],course[i][j]),null);
}
}
}
}
</script>
</head>
<body>
<h2>課程評價</h2>
階段選擇：<select id="firstCourse" onchange="changeCourse()">
<option value="請選擇所處階段">--請選擇所處階段--</option>
</select>
課程選擇：<select id="secondCourse">
<option value="請選擇所學課程">--請選擇所學課程--</option>
</select>
</body>
</html>
未選擇時：
選擇第一階段，第二階段的內容根據第一階段決定：
