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数据

转载于:https://www.cnblogs.com/mg007/p/10059697.html