ajax实现三级联动下拉菜单

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

要求：选择第一个下拉菜单的某个选项之后，第二个下拉菜单的选项要随第一个的选项变化而变化，同理，第三个下拉菜单的选项要随第二个下拉菜单选项的变化而变化，三个菜单的选项都是从数据库中读取。
   ajax实现三级联动下拉菜单
  某个年级某个科目的某个教师
<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最美妙的地方。

   
ajax实现三级联动下拉菜单



标签：

相关文章