要求：选择第一个下拉菜单的某个选项之后，第二个下拉菜单的选项要随第一个的选项变化而变化，同理，第三个下拉菜单的选项要随第二个下拉菜单选项的变化而变化，三个菜单的选项都是从数据库中读取。
某个年级某个科目的某个教师
<body> <div><select id="class" name="class" onchange="showcourse(this.value)"> <option value="" selected="selected">选择年级</option> <?php showclass();?> </select> <select id="course" name="course"onchange="showteacher(this.value)"> <option value="" selected="selected">选择科目</option> </select> <select id="teacher" name="teacher" onchange="showtable(this.value )"> <option value="" selected="selected">选择教师</option> </select>
</div>
<div id="showcourse"></div></body>
一、 主思路：1、先弄好前端显示页面。 2、年级下拉菜单通过php文件直接从数据库中读取所有的年级 3、选中年级选项的时候，触发事件，showcourse（）函数通过年级下拉菜单选项确定科目下拉菜单的选项 4、选中科目选项的时候，触发事件，showteacher（）函数通过科目下拉菜单选项确定教师下拉菜单的选项 5、选中教师选项的时候，出发时间，showtable（）函数通过教师下拉菜单选项输出该教师的课程表
二、 上面的主思路中，第2步很容易解决，直接写个php脚本，链接数据库，然后从数据库中取出所有年级，然后在前端通过showclass（）函数显示出来； 那么第3步该怎么解决呢？当选中年级选项的时候，触发showcourse（）事件，该事件通过ajax实现，代码如下： function showcourse(str){var xmlhttp;if(window.XMLHttpRequest){xmlhttp=new XMLHttpRequest();}else{xmlhttp = new ActiveXObject();}
xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("course").innerHTML=xmlhttp.responseText; } } xmlhttp.open("GET","showcourse.php?="+str,true); xmlhttp.send();} showcourse.php文件根据传过来的str参数（该参数就是选择的年级所对应的的value）从数据库中检索该年级所有的科目，然后传回给ajax，通过document.getElementById("course").innerHTML=xmlhttp.responseText在前端显示出来。
然后第4步、第5步都跟上面一样的处理过程。而且，用ajax更大的好处是，查看不同教师的课表时不用刷新整个页面，而是局部刷新数据，这也是ajax最美妙的地方。
