mysql数据表：https://www.cnblogs.com/zhu520/p/8244578.html
HTML部分代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
select {
width: 200px;
}
</style>
</head>
<body>
<!-- 创建select下拉框 -->
<select id="provinces">
<option>请选择省份</option>
</select>
<select id="citys">
<option>请选择城市</option>
</select>
<select id="areas">
<option>请选择区县</option>
</select>
<script type="text/javascript" src="jquery-3.4.1.min.js"></script>
<script>
//当页面加载完成时，执行省级下拉框的实现
$(function(){
//创建省市县对象
var provinces = $("#provinces");
var citys = $("#citys");
var areas = $("#areas");
//利用ajax加载province
$.ajax({
type:"GET",
url:"get_province.php",
success:function(data){
//data返回的是一个以对象为元素的数组，
for(var i=0;i<data.length;i++){
//op循环接收新建立的option
var op = $("<option value='"+data[i]["provinceid"]+"'>"+data[i]["province"]+"</option>");
//optiont添加到provinces中
provinces.append(op);
}
},
//规定传输数据的格式为json
dataType:"json"
});
//province绑定change事件，当province发生变化时，change事件触发,它们都应放在ready函数内，以防change接收不到改变的信息
provinces.change(function(){
// 获取省份id
var val = $(this).val();
//当省份发生变化时，清空城市和县区，恢复初始状态
citys.html("<option>请选择城市</option>");
areas.html("<option>请选择区县</option>");
//加载citys下拉框
$.ajax({
type:"GET",
url:"get_city.php?provinceid="+val,
success:function(data){
for(var i=0;i<data.length;i++){
var op = $("<option value='"+data[i]["cityid"]+"'>"+data[i]["city"]+"</option>");
citys.append(op);
}
},
dataType:"json"
});
});
//citys绑定change事件，当city发生变化时，change事件触发,它们都应放在ready函数内，以防change接收不到改变的信息
citys.change(function(){
// 获取省份id
var val = $(this).val();
//当省份发生变化时，清空城市和县区，恢复初始状态
areas.html("<option>请选择区县</option>");
//加载citys下拉框
$.ajax({
type:"GET",
url:"get_area.php?cityid="+val,
success:function(data){
for(var i=0;i<data.length;i++){
var op = $("<option value='"+data[i]["areaid"]+"'>"+data[i]["area"]+"</option>");
areas.append(op);
}
},
dataType:"json"
});
});
});
</script>
</body>
</html>
php代码
//get_province01.php
<?php
//l27.0.0.1等同于localhost，可解决localhost失效问题，root，123456，数据库账户名，密码
$link = mysql_connect("127.0.0.1","root","123456");
//选择数据库，test数据库名
mysql_select_db("test",$link);
//设置字符编码
mysql_query("set names 'utf8'",$link);
//声明SQL语句
$sql = "select * from provinces";
//接受结果集，不可直接使用
$result = mysql_query($sql);
//建数组
$arr = array();
//j将结果集中的内容添加到数组中
while($row = mysql_fetch_array($result)){
array_push($arr,$row);
}
//对象转为json格式数据，json_decode则为字符串转对象
echo json_encode($arr);
//关闭连接
mysql_close($link);
?>
//get_city01.php
<?php
//接收参数provinceid
$provinceid = $_GET["provinceid"];
$link = mysql_connect("127.0.0.1","root","123456");
mysql_select_db("test",$link);
mysql_query("set names 'utf8'",$link);
//声明SQL语句，添加where限定条件
$sql = "select * from cities where provinceid=".$provinceid;
$result = mysql_query($sql);
$arr = array();
while($row = mysql_fetch_array($result)){
array_push($arr,$row);
}
echo json_encode($arr);
mysql_close($link);
?>
//get_area01.php
<?php
//接收参数provinceid
$cityid = $_GET["cityid"];
$link = mysql_connect("127.0.0.1","root","123456");
mysql_select_db("test",$link);
mysql_query("set names 'utf8'",$link);
//声明SQL语句，添加where限定条件
$sql = "select * from areas where cityid=".$cityid;
$result = mysql_query($sql);
$arr = array();
while($row = mysql_fetch_array($result)){
array_push($arr,$row);
}
echo json_encode($arr);
mysql_close($link);
?>
