<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="../jquery-3.2.1.min.js"></script>
</head>
<body>
省: <select name="" id="sheng">
<option value="">请选择</option>
</select>
市: <select name="" id="shi">
<option value="">请选择</option>
</select>
区: <select name="" id="qu">
<option value="">请选择</option>
</select>
</body>
</html>
<script>
$(function(){
//获取省的信息
ajaxFun(0,"sheng");
})
function ajaxFun(id,type){
$.ajax({
url:"sjld.php",//服务器的地址
data:{id:id},//发送的数据
success:function(data){//执行成功的回调
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);
}
$('#sheng').change(function(){//省的下拉 值改变的时候添加事件
var id=$(this).val();//获取选择的省的id
ajaxFun(id,"shi");//ajax再获取市
})
$('#shi').change(function(){//市的下拉 值改变的时候添加事件
var id=$(this).val();//获取选择的市的id
ajaxFun(id,"qu");//ajax再获取区
})
</script>
<?php
//连接数据库
$db =new MySQLi('localhost','root','','z_0705');//登录的数据库
!mysqli_connect_error()or die("连接失败");//如果连接错误
$db->query("set names utf8");//字符集是utf8
//接受数据
$id=0;
if(!empty($_GET)){//如果得到的数不是空
$id = $_GET['id'];//获取省的id
}
//查表父id=0
$sql = "select id,area_name from dt_area where area_parent_id=$id";
$res=$db->query($sql);//执行sql语句，返回结果集
$arr=$res->fetch_all();//把结果集转成数组
//返回数据 字符串
arrTostr($arr);
function arrTostr($a){//$a是结果集返回的是二维数组
$brr = array();//定义一个数组用来存数组转字符串
foreach($a as $v){//遍历数组里面的数
$temp = implode(",",$v);//遍历数组里面的数
$brr[] = $temp;//转成一维数组
}
echo implode("^",$brr);//转成字符串
}