<!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>
未选择时：
选择第一阶段，第二阶段的内容根据第一阶段决定：
