jsp页面中的下拉框问题
各位大侠，我想在jsp页面中实现：当你选中某一个下拉框的选项，在同一页面的另一个下拉框显示出对应的选项，下面是jsp页面的代码：
<%@ page language="java" contentType="text/html;charset=UTF-8" %>
<%@ page import="java.util.List" %>
<%@ page import="cn.com.jobedu.my_case.ClassInfo" %>
<%@ page import="cn.com.jobedu.my_case.CourseInfo" %>
<%@ page import="cn.com.jobedu.my_case.TeacherInfo" %>
<%@ page import="cn.com.jobedu.my_case.CaseInfo" %>
<!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>edit Case information</title>
</head>
<% CaseInfo caseInfo=(CaseInfo)request.getAttribute("caseInfo"); %>
<body>
<p>编辑教师任课信息</p>
<form id="form1" name="form1" method="post" action="/case/servlet/CaseServlet">
<input type="hidden" name="method" value="postEditCaseInfo"/>
<table width="471" height="209" border="0" bordercolor="#ECE9D8">
<tr>
<td width="107" height="32">班级名称：</td>
<td width="354"><label>
<select name="Clid" id="Clid">
<% List list1=(List)request.getAttribute("list1");
for(int i=0; i< list1.size(); i++){
ClassInfo classInfo=(ClassInfo)list1.get(i);
%>
<option value="<%=classInfo.getClid() %>"><%=classInfo.getClname() %></option>
<%} %>
</select>
</label></td>
</tr>
<tr>
<td height="36">课程名称：</td>
<td><label>
<select name="Coid" id="Coid">
<% List list2=(List)request.getAttribute("list2");
for(int i=0; i< list2.size(); i++){
CourseInfo courseInfo=(CourseInfo)list2.get(i);
%>
<option value="<%=courseInfo.getCoid() %>"><%=courseInfo.getConame() %></option>
<%} %>
</select>
</label></td>
</tr>
<tr>
<td height="35">教师名称：</td>
<td><label>
<select name="Tid" id="Tid">
<% List list3=(List)request.getAttribute("list3");
for(int i=0; i< list3.size(); i++){
TeacherInfo teacherInfo=(TeacherInfo)list3.get(i);
%>
<option value="<%=teacherInfo.getTid() %>"><%=teacherInfo.getTname() %></option>
<%} %>
</select>
</label></td>
</tr>
<tr>
<td height="34">合班情况：</td>
<td><label>
<input name="Catoge" type="text" id="Catoge" size="50" value="<%=caseInfo.getCatoge() %>" />
</label></td>
</tr>
<tr>
<td height="28">上课时间：</td>
<td><label>
<input name="Catime" type="text" id="Catime" size="50" value="<%=caseInfo.getCatime() %>" />
</label></td>
</tr>
<tr>
<td height="30"><label>
<input type="reset" name="button" id="button" value="重置" />
</label></td>
<td><label>
<input type="submit" name="button2" id="button2" value="提交" />
</label></td>
</tr>
</table>
</form>
<p> </p>
</body>
</html>
我想在当你选中课程下拉框中的某一门课程后，教师下拉框显示该门课程下有哪些教师可以选（一门课程下有多个教师，一个教师只能教一门课程），麻烦各位大侠看看如何解决？
谢谢！
[解决办法]
就是最简单的二级联动下拉列表的应用啊，给你个思路吧：
<!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>
