MySQL实现三级联动选择菜单，轻松搭建树形菜单结构（mysql三级联动）
MySQL实现三级联动选择菜单，轻松搭建树形菜单结构！
随着互联网规模的不断扩大，网站的复杂度也在不断提高，树形菜单结构成为了网站设计中常见的一种形式。为了方便用户的选择，常常需要设计出多级菜单，以便用户快速找到自己需要的内容。本文将介绍如何使用MySQL实现三级联动选择菜单，并且轻松地搭建出树形菜单结构。
一、数据库设计
首先需要设计好数据库结构。在本案例中，我们将设计一个名为“region”的数据库，其中包含三个表：“province”、“city”和“district”，分别代表省份、城市和区/县。每一个表都包含以下字段：id、name和parent_id，其中id为主键，name为地区名，parent_id为该地区的上一级地区的id。
CREATE TABLE `province` (
`id` int(10) unsigned NOT NULL AUTO_INCREMENT COMMENT ‘省份id’,
`name` varchar(20) NOT NULL COMMENT ‘省份名称’,
`parent_id` int(10) unsigned NOT NULL DEFAULT ‘0’ COMMENT ‘上级行政区划id’,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COMMENT=’省份表’;
CREATE TABLE `city` (
`id` int(10) unsigned NOT NULL AUTO_INCREMENT COMMENT ‘城市id’,
`name` varchar(30) NOT NULL COMMENT ‘城市名称’,
`parent_id` int(10) unsigned NOT NULL DEFAULT ‘0’ COMMENT ‘省份id’,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COMMENT=’城市表’;
CREATE TABLE `district` (
`id` int(10) unsigned NOT NULL AUTO_INCREMENT COMMENT ‘区县id’,
`name` varchar(50) NOT NULL COMMENT ‘区县名称’,
`parent_id` int(10) unsigned NOT NULL DEFAULT ‘0’ COMMENT ‘城市id’,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COMMENT=’区县表’;
二、插入数据
接下来需要插入一些数据。假设我们要插入北京市的信息，那么可以按照以下方式进行插入：
INSERT INTO `province` (`id`, `name`, `parent_id`) VALUES (1, ‘北京市’, 0);
INSERT INTO `city` (`id`, `name`, `parent_id`) VALUES (1, ‘北京市’, 1);
INSERT INTO `district` (`id`, `name`, `parent_id`) VALUES (1, ‘东城区’, 1);
在插入完数据后，可以通过SELECT语句来查看插入的结果:
SELECT * FROM `province` WHERE `name` = ‘北京市’;
SELECT * FROM `city` WHERE `name` = ‘北京市’;
SELECT * FROM `district` WHERE `name` = ‘东城区’;
三、实现页面
在完成数据库设计和数据插入之后，接下来需要在页面上实现三级联动选择菜单。在本案例中，我们选择使用HTML+JavaScript来实现这个功能。
在HTML文件中，我们需要先创建三个菜单框，代码如下：
请选择省份
请选择城市
请选择区县
然后，在JavaScript文件中，我们需要编写以下代码，来实现根据用户选择的省份，动态改变城市和区县的选项：
$(document).ready(function() {
$(“#province”).change(function() {
var provinceid = $(this).val();
if (provinceid != “”) {
$.ajax({
type: “POST”,
url: “getCity.php”,
data: “provinceid=”+provinceid,
cache: false,
success: function(html) {
$(“#city”).html(html);
$(“#district”).html(“请选择区县”);
}
});
} else {
$(“#city”).html(“请选择城市”);
$(“#district”).html(“请选择区县”);
}
});
$(“#city”).change(function() {
var cityid = $(this).val();
if (cityid != “”) {
$.ajax({
type: “POST”,
url: “getDistrict.php”,
data: “cityid=”+cityid,
cache: false,
success: function(html) {
$(“#district”).html(html);
}
});
} else {
$(“#district”).html(“请选择区县”);
}
});
});
这段JavaScript代码中，我们使用了jQuery来实现AJAX异步请求，并且根据用户选择的省份和城市，调用getCity.php和getDistrict.php来查询数据库中对应的城市和区县信息，然后将结果动态显示在相应的菜单框中。具体的php代码如下：
getCity.php
$provinceid = $_POST[‘provinceid’];
$sql = “SELECT * FROM `city` WHERE `parent_id` = ‘”.$provinceid.”‘”;
$result = mysql_query($sql);
echo “请选择城市”;
while ($row = mysql_fetch_array($result)) {
echo “”.$row[‘name’].””;
}
getDistrict.php
$cityid = $_POST[‘cityid’];
$sql = “SELECT * FROM `district` WHERE `parent_id` = ‘”.$cityid.”‘”;
$result = mysql_query($sql);
echo “请选择区县”;
while ($row = mysql_fetch_array($result)) {
echo “”.$row[‘name’].””;
}
四、测试
我们需要将HTML文件和JavaScript文件放到服务器上，并且测试其效果。在测试过程中，需要注意以下几点：
1. 需要在服务器上运行MySQL，并且创建好region数据库，并且插入了一些测试数据。
2. 需要在JavaScript文件中修改getCity.php和getDistrict.php文件的路径（如果不在同一目录下的话），以保证AJAX异步请求能够正确调用。
3. 在测试之前需要先引入jQuery库，并且保证能够正常访问。
下面是测试结果的示例图，可以看到三级联动菜单已经成功实现：
![MySQL实现三级联动选择菜单][1]
总结
通过本文的介绍，可以看到使用MySQL实现三级联动选择菜单并不是很难。只需要在数据库中设计好地区结构，并且编写一些简单的HTML和JavaScript代码，就可以轻松地搭建出树形菜单结构，帮助用户快速找到需要的内容。
参考资料：
1. jQuery官网：http://jquery.com/
2. W3Schools：http://www.w3schools.com/
3. MySQL官网：http://www.mysql.com/
[1]: https://img-blog.csdn.net/20170824103348579?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvY2hhY2hhbmdjZmJfaGFuZGxl/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/q/85/progressive/true
