【Web】AJAX实现学院专业班级联动效果

---

AJAX实现学院专业班级联动效果

---

一、说明：

利用 jQuery 提供的 AJAX 方法实现页面的无刷新局部更新,即实现学 院、专业和班级的联动效果。具体要求 如下:

1.页面加载完成后,数据库已有的学院出现在“学院”下拉菜单中。

2. 如果选择了某个学院,则在“专业”下拉菜单中出现数据库已有的该学院下的专业, “班级”下拉菜单中会出现默认“专业”下拉菜单中当前项的默认第一个班级。

3. 如果选择了某个专业,则在“班级”下拉菜单中选择数据库中已有的班级信息。

4. “班级”下拉菜单的内容会随着“专业”下拉菜单的选中内容变化而变化,“专业” 下拉菜单中的内容会随着“学院”下拉菜单的选中内容变化而变化。

二、效果



三、代码：

/*HTML*/
<label class="userInput" id="school_info">
    <select name="college" id="college">

    </select>
    <select name="speciality" id="speciality">

    </select>
    <select name="class" id="class">

    </select>
</label>

/*JS*/
<script type="text/javascript">
    var initOption="<option value='0'>请先选择学院</option>";

    $("#college").html(initOption);  //初始化学院选项

    $("#college").load("update_school.php?q=1");  //显示所有学院选项

    $("#college").change(function(){  //如果选择了学院
        $.post("update_school.php?q=2",  {id:$(this).val()},function(data){  //php文件，传入的值，获取返回值
            $("#speciality").html(data);  //显示返回值，即php文件的输出内容
            $.post("update_school.php?q=3",{id:$("#speciality").val()},function(data){  //同理处理班级
                $("#class").html(data);
            });
        });

    })

    $("#speciality").change(function(){
        $.post("update_school.php?q=3",{id:$(this).val()},function(data){
            $("#class").html(data);
        });
    });
</script>

/*update_school.php*/
<?php
    $q=$_REQUEST["q"];
    if(isset($_REQUEST["id"])) $id=$_REQUEST["id"];

    include("conn.php");
    switch($q){
        case "1":
            $sql="select id,college_name from colleges";
            break;
        case "2":
            $sql="select id,speciality_name from specialities where college_id=$id";
            break;
        case "3":
            $sql="select id,class_name from classes where speciality_id=$id";
            break;
    }

    $rs=mysqli_query($conn,$sql);
    if($q==1) echo "<option value='0'>请先选择学院</option>";
    while($row=mysqli_fetch_array($rs)){
        echo "<option value='".$row[0]."'>".$row[1]."</option>";
    }
?>

/*conn.php*/
<?php
    $conn = new mysqli ("localhost", "root","root","lab3");  //填写localhost、你的用户名、密码、数据库名称
    if (mysqli_connect_error())
    {
      printf("Connect faile: %s\n",mysqli_connect_error());
      exit;
    }
    $sql = "set names 'utf8'";  //编码方式
    mysqli_query($conn,$sql);

?>

注意：还需要加入jquery.js