【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