php省市区三级联动

效果

步骤

前端：通过ajax请求获取数据，使用了jquery

页面一开始加载所有省份信息 -》当选择省下拉框后触发改变监听时间-change -》当选择市下拉框后触发改变监听时间-change

获取数据后遍历后端返回的数据 -》 $.each(data,function(i,item)){...}

后端：接受请求，操作数据库-查询数据，返回json数据

数据： -》demo.sql -》 省市区的信息

省市区sql.zip

代码

前端：

<div>
    省：<select id="provinces">  <option value="">请选择省份</option></select>
    市：<select id="citys"><option value="">请选择市</option></select>
    区：<select id="countys"><option value="">请选择县</option></select>
</div>

//引入jquery

$(function() {
    //页面初始，加载所有的省份
    $.ajax({
        type: "get",
        url: "getGeography.php",
        data: {"type":1},
        dataType: "json",
        success: function(data) {
            //遍历json数据，组装下拉选框添加到html中
            $("#provinces").html("<option value=''>请选择省</option>");
            $.each(data, function(i, item) {
                $("#provinces").append("<option value='" + item.province_num + "'>" + item.province_name + "</option>");
            });
        }
    });  

    //监听省select框
    $("#provinces").change(function() {
        $.ajax({
            type: "get",
            url: "getGeography.php",
            data: {"pnum": $(this).val(),"type":2},
            dataType: "json",
            success: function(data) {
                //遍历json数据，组装下拉选框添加到html中
                $("#citys").html("<option value=''>请选择市</option>");
                $.each(data, function(i, item) {
                    $("#citys").append("<option value='" + item.city_num + "'>" + item.city_name + "</option>");
                });
            }
        });
    });  

    //监听市select框
    $("#citys").change(function() {
        $.ajax({
            type: "get",
            url: "getGeography.php",
            data: {"cnum": $(this).val(),"type":3},
            dataType: "json",
            success: function(data) {
                //遍历json数据，组装下拉选框添加到html中
                $("#countys").html("<option value=''>请选择区</option>");
                $.each(data, function(i, item) {
                    $("#countys").append("<option value='" + item.id + "'>" + item.area_name + "</option>");
                });
            }
        });
    });
});

PHP：

//连接数据库
//$conn = ...

$type = isset($_GET['type'])?$_GET['type']:0;//获取请求信息类型 1省 2市 3区
$province_num = isset($_GET['pnum'])?$_GET['pnum']:'440000';//根据省编号查市信息
$city_num = isset($_GET['cnum'])?$_GET['cnum']:'440100';//根据市编号查区信息

switch ($type) {//根据请求信息类型，组装对应的sql
	case 1://省
		$sql = "SELECT * FROM province";
		break;
	case 2://市
		$sql = "SELECT * FROM city WHERE province_num='{$province_num}'";
		break;
	case 3://区
		$sql = "SELECT * FROM area WHERE city_num='{$city_num}'";
		break;
	default:
		die('no data');
		break;
}
$result = mysqli_query($conn, $sql);//执行查询sql
if (mysqli_num_rows($result) <= 0){
	die("no data");
}
// 组装数据输出
$rows = array();
while($row = mysqli_fetch_assoc($result)) {
	$rows[] = $row;
}
echo json_encode($rows);//返回json数据