下拉框联动

最新推荐文章于 2024-09-24 08:37:02 发布

卡尔王

最新推荐文章于 2024-09-24 08:37:02 发布

阅读量583

点赞数

分类专栏：前端技术

前端技术专栏收录该内容

3 篇文章

订阅专栏

<!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.youkuaiyun.com/T5500