本文已参与「新人创作礼」活动，一起开启掘金创作之路。

三级联动是我们经常见的一个功能，最经典的案例是省市区三级，第一个下拉框选择一个省份，第二个下拉框出现该省份下的城市，第二个下拉框选择一个城市，第三个下拉框出现该城市下的县区。

下面的案例我们采用学校、班级、学生三级，进行联动查询。

文章最后附数据库与本案例源代码。

一、本案例涉及的知识

HTML
jQuery ajax
PHP
MySQL

二、页面准备

三级联动中的第一级是需要事先在页面中显示的，因为第一级需要最先选择。

所以第一级（学校）直接查询出来并在下拉框中显示。

liandong.php

<?php
// 连接数据库
$conn = mysqli_connect('localhost', 'root', 'root', 'jtxy');
// 查询所有的学校
$sql = "select * from school";
// 执行 SQL 语句
$query = mysqli_query($conn, $sql);
// 取出数据
$school = mysqli_fetch_all($query, MYSQLI_ASSOC);
?>
<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>三级联动</title>
  <script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
 </head>
 <body>
  <div>
	<label>学校：</label>
	<select id="school">
		<option value="" selected>请选择学校</option>
		<?php foreach ($school as $v) { ?>
			<option value="<?php echo $v['school_id']; ?>"><?php echo $v['school_name']; ?></option>
		<?php } ?>
	</select>
  </div>
  <div>
    <label>班级：</label>
	<select id="class">
		<option value="" selected>请选择班级</option>
	</select>
  </div>
  <div>
	<label>学生：</label>
	<select id="student">
		<option value="" selected>请选择学生</option>
	</select>
  </div>
 </body>
</html>

三、选择学校查询班级

首先监听学校下拉框的值改变，改变后使用ajax携带当前学校的id请求PHP查询班级数据。

<script>
	$(function () {
		// 监听学校下拉框的值改变
		$('#school').change(function () {
			// console.log('下拉框的值发生改变了，值为：' + $(this).val());
			$.ajax({
			    // 请求 class.php
				url: "class.php",
				// 携带参数 school_id，值为当前选择的学校的id
				data: {school_id: $(this).val()},
				// 成功将返回的数据放入 select 标签中
				success: function (res) {
					$('#class').html(res);
				},
				error: function () {
					alert('数据获取失败！');
				}
			});
		});
	})
  </script>

class.php

<?php
// 连接数据库
$conn = mysqli_connect('localhost', 'root', 'root', 'jtxy');
// 接收学校id参数
$schoolId = $_GET['school_id'];
// 查询当前学校下的所有班级
$sql = "select * from class where sid = $schoolId";
// 执行 SQL 语句
$query = mysqli_query($conn, $sql);
// 取出数据
$class = mysqli_fetch_all($query, MYSQLI_ASSOC);
// 将数组组装成<option></option>的形式，方便在 HTML 中直接显示
$options = [
	"<option value=''>请选择班级</option>"
];
foreach ($class as $v) {
	$options[] = "<option value='".$v['cid']."'>".$v['cname']."</option>";
}
// 打印到页面中，供 ajax 获取
print_r($options);
?>

四、选择班级查询学生

监听班级下拉框的值改变，改变后使用ajax携带当前班级的id请求PHP查询学生数据。

<script>
	$(function () {
		// 监听班级下拉框的值改变
		$('#class').change(function () {
			// console.log('下拉框的值发生改变了，值为：' + $(this).val());
			$.ajax({
				url: "student.php",
				data: {class_id: $(this).val()},
				success: function (res) {
					$('#student').html(res);
				},
				error: function () {
					alert('数据获取失败！');
				}
			});
		});
	})
  </script>

student.php

<?php
// 连接数据库
$conn = mysqli_connect('localhost', 'root', 'root', 'jtxy');
// 接收班级id参数
$classId = $_GET['class_id'];
// 查询当前班级下的所有学生
$sql = "select * from student where cid = $classId";
// 执行 SQL 语句
$query = mysqli_query($conn, $sql);
// 取出数据
$student = mysqli_fetch_all($query, MYSQLI_ASSOC);
// 将数组组装成<option></option>的形式
$options = [
	"<option value=''>请选择学生</option>"
];
foreach ($student as $v) {
	$options[] = "<option value='".$v['id']."'>".$v['name']."</option>";
}
print_r($options);
?>

五、效果图

在这里插入图片描述

六、源代码

1. MySQL

（1）学校表

CREATE TABLE `school` (
  `school_id` int(11) NOT NULL AUTO_INCREMENT COMMENT 'ID',
  `school_name` varchar(100) NOT NULL DEFAULT '' COMMENT '学校名称',
  PRIMARY KEY (`school_id`)
) ENGINE=MyISAM AUTO_INCREMENT=6 DEFAULT CHARSET=utf8;

（2）班级表

CREATE TABLE `class` (
  `cid` int(11) NOT NULL AUTO_INCREMENT COMMENT 'ID',
  `cname` varchar(15) NOT NULL DEFAULT '' COMMENT '班级名称',
  `sid` int(11) NOT NULL COMMENT '所属学校',
  PRIMARY KEY (`cid`)
) ENGINE=MyISAM AUTO_INCREMENT=7 DEFAULT CHARSET=utf8;

（3）学生表

CREATE TABLE `student` (
  `id` int(11) NOT NULL AUTO_INCREMENT COMMENT '序号',
  `image` varchar(255) NOT NULL DEFAULT '' COMMENT '头像',
  `name` varchar(10) NOT NULL DEFAULT '' COMMENT '姓名',
  `age` tinyint(2) unsigned NOT NULL DEFAULT '0' COMMENT '年龄',
  `sex` tinyint(1) NOT NULL DEFAULT '0' COMMENT '性别 1-男 2-女 0-未知',
  `mobile` char(11) NOT NULL DEFAULT '' COMMENT '手机号',
  `idcard` char(18) NOT NULL DEFAULT '' COMMENT '身份证号',
  `address` varchar(100) NOT NULL DEFAULT '' COMMENT '家庭住址',
  `cid` int(11) NOT NULL DEFAULT '0' COMMENT '所在班级的id',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=56 DEFAULT CHARSET=utf8;

2. PHP

（1）liandong.php

<?php
// 连接数据库
$conn = mysqli_connect('localhost', 'root', 'root', 'jtxy');
// 查询所有的学校
$sql = "select * from school";
// 执行 SQL 语句
$query = mysqli_query($conn, $sql);
// 取出数据
$school = mysqli_fetch_all($query, MYSQLI_ASSOC);
?>
<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>三级联动</title>
  <script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
 </head>
 <body>
  <div>
	<label>学校：</label>
	<select id="school">
		<option value="" selected>请选择学校</option>
		<?php foreach ($school as $v) { ?>
			<option value="<?php echo $v['school_id']; ?>"><?php echo $v['school_name']; ?></option>
		<?php } ?>
	</select>
  </div>
  <div>
    <label>班级：</label>
	<select id="class">
		<option value="" selected>请选择班级</option>
	</select>
  </div>
  <div>
	<label>学生：</label>
	<select id="student">
		<option value="" selected>请选择学生</option>
	</select>
  </div>
  <script>
	$(function () {
		$('#school').change(function () {
			// console.log('下拉框的值发生改变了，值为：' + $(this).val());
			$.ajax({
				url: "class.php",
				data: {school_id: $(this).val()},
				success: function (res) {
					$('#class').html(res);
				},
				error: function () {
					alert('数据获取失败！');
				}
			});
		});
		$('#class').change(function () {
			// console.log('下拉框的值发生改变了，值为：' + $(this).val());
			$.ajax({
				url: "student.php",
				data: {class_id: $(this).val()},
				success: function (res) {
					$('#student').html(res);
				},
				error: function () {
					alert('数据获取失败！');
				}
			});
		});
	})
  </script>
 </body>
</html>

（2）class.php

<?php
// 连接数据库
$conn = mysqli_connect('localhost', 'root', 'root', 'jtxy');
// 接收学校ID参数
$schoolId = $_GET['school_id'];
// 查询当前学校下的所有班级
$sql = "select * from class where sid = $schoolId";
// 执行 SQL 语句
$query = mysqli_query($conn, $sql);
// 取出数据
$class = mysqli_fetch_all($query, MYSQLI_ASSOC);
// 将数组组装成<option></option>的形式
$options = [
	"<option value=''>请选择班级</option>"
];
foreach ($class as $v) {
	$options[] = "<option value='".$v['cid']."'>".$v['cname']."</option>";
}
print_r($options);
?>

（3）student.php

<?php
// 连接数据库
$conn = mysqli_connect('localhost', 'root', 'root', 'jtxy');
// 接收学校ID参数
$classId = $_GET['class_id'];
// 查询当前班级下的所有学生
$sql = "select * from student where cid = $classId";
// 执行 SQL 语句
$query = mysqli_query($conn, $sql);
// 取出数据
$student = mysqli_fetch_all($query, MYSQLI_ASSOC);
// 将数组组装成<option></option>的形式
$options = [
	"<option value=''>请选择学生</option>"
];
foreach ($student as $v) {
	$options[] = "<option value='".$v['id']."'>".$v['name']."</option>";
}
print_r($options);
?>

访问 Gitee >>>

PHP基础 + Ajax实现三级联动