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數據