<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
//JSP构造并输出如下格式的两个JSON对象
var ar_course = {
'C1': '语文',
'C2': '数学',
'C3': '物理',
'C4': '化学'
}
var ar_teachers = {
'张三': {
id: 1,
course: '语文'
},
'李四': {
id: 2,
course: '语文'
},
'王五': {
id: 3,
course: '化学'
},
'赵六': {
id: 4,
course: '数学'
}
}
window.onload = function() {
//初始化课程下拉列表
var course = document.getElementById('course');
for (var c in ar_course) course.add(new Option(ar_course[c], c), null);
//绑定课程下拉列表的onchange事件处理函数
course.onchange = function() {
var teachers = document.getElementById('teachers');
teachers.options.length = 0; //清空教师下拉列表选项
for (var t in ar_teachers) {
if (ar_teachers[t].course == ar_course[this.value]) teachers.add(new Option(t, ar_teachers[t].id), null);
}
}
}
</script>
</head>
<body>
<select id="course">
<option value="NULL">请选择课程</option>
</select>
<select id="teachers">
<option value="NULL">请选择课程</option>
</select>
</body>
</html>
来自于乌镇程序员 http://my.csdn.net/T5500
798
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
