php实现省市区三级地址联动

效果

步骤

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

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

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

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

省市区sql.zip

链接：https://pan.baidu.com/s/1nLJctMKsy0g6ABwxjBuFgA

提取码：m3r8

代码

前端：

<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: "getCity.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: "getCity.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: "getCity.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数据

本文属原创，转载请注明原文：http://www.zhimatong.com/jiaocheng/297.html

为保证教程的实用性及扩大知识面覆盖，如果您有相似问题而未解决，可联系在线客服免费技术支持。