html + js 在一个页面
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>三级联动</title>
<script type="text/javascript" src="../jquery-3.2.1.min.js"></script>
</head>
<body>
省：<select name="" id="sheng"></select>
市：<select name="" id="shi">
<option value="city">请选择市</option>
</select>
区：<select name="" id="qu">
<option value="county">请选择区</option>
</select>
</body>
</html>
<script>
$(function(){
//获取省的信息 方法 观察表所得 0是父级id
ajaxFun(0,"sheng");
})
//调用方法
function ajaxFun(id,type){
$.ajax({
url:"sanji.php",//请求的服务器地址
data:{id:id},//发送数据
success:function(data){ //ajax执行成功的回调
strToArr(data,type);//执行成功的方法
}
});
}
// 调用成功方法 字符串转数组
function strToArr(str,type){
var arr=str.split("^"),//一维数组 先根据这^分
brr=[];//用来存字符串转数组的数组
for(var i=0;i<arr.length;i++){
var temp=arr[i].split(",");//再根据这个，分
brr.push(temp);//分完添加到定义好的数组里面
}
//往页面追加元素方法
addHtml(brr,type);
}
//往页面追加元素
function addHtml(brr,type){
var str='<option value="">请选择省</option>';//刚开始定义下拉
for(var i in brr){//遍历数组
str += '<option value="'+brr[i][0]+'">'+brr[i][1]+'</option>';
}
$('#'+type).html(str);//整理好的元素 添加到定义好的str
}
//省的下拉 值改变的时候 添加事件
$('#sheng').change(function(){
$('#qu').html('<option value="">请选择区</option>');//省重新选择的时候清空区
var id=$(this).val(); //显示当前省的id
ajaxFun(id,"shi");//省下拉重新选择的时候 市的值跟着变化
})
//市的下拉 值改变的时候 添加事件
$('#shi').change(function(){
var id=$(this).val();//显示当前市的id
ajaxFun(id,"qu");//市下拉重新选择的时候 区的值跟着变化
})
</script>
php
<?php
//$db 是数据库的连接资源
$db=new MySQLi("localhost","root","","z_0705");
!mysqli_connect_error()or die("你连的什么玩意");
$db->query("set names utf8");
//接受数据
$id=$_GET['id'];
//写sql语句 条件查询 查表 父id=0
$sql=" select id,area_name from dt_area where area_parent_id=$id;";
//执行sql语句 返回 结果集
$res=$db->query($sql);
//把结果集转成数组
$arr=$res->fetch_all();
//返回数据 字符串
arrToStr($arr);
//二维数组转字符串
function arrToStr($a){//二维数组转字符串
$brr=array();//存转好字符串的数组
foreach($a as $v){
$temp=implode(",",$v); //整合元素之间这个，隔开
$brr[]=$temp;//分好存到这个定义好的数组里面
}
echo implode("^",$brr);//整合字符串之间这个^隔开
}