您的位置：首页 > 其它

ajax实现三级联动下拉菜单

2013-03-22 16:37 218 查看
老师最近给了个小任务，排课系统中，将老师的的课表显示出来，要用到下拉菜单三级联动，在网上找了很多资料，但是看别人的代码太吃力了，只要思路清晰，何不自己动手敲一个出来。这里别看我的代码，看思路就好了。

要求：选择第一个下拉菜单的某个选项之后，第二个下拉菜单的选项要随第一个的选项变化而变化，同理，第三个下拉菜单的选项要随第二个下拉菜单选项的变化而变化，三个菜单的选项都是从数据库中读取。



某个年级某个科目的某个教师

<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最美妙的地方。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航