數據庫dt_area中表的數據結構：

html代碼部分：

省：<select name="" id="sheng" onChange="selshi(this)">
    <option value="">請選擇</option>
    </select>
市：<select name="" id="shi" onChange="selqu(this)">
    <option value="">請選擇</option>
</select>
區：<select name="" id="qu"
 
>
    <option value="">請選擇</option>
</select

js代碼部分：

//用來放chulidata函數裏面的新數組
    var attr = [];
    //頁面加載完成後調用函數sendInfo,給函數傳了個省下拉框的id
    window.onload = function(){
        sendInfo(‘sheng‘);
    }
    //頁面加載完成後調用的函數（code=0頁面加載完成後先將省的信息顯示到頁面），type就是傳過來的select的id，code是以get方式向php頁面傳的area_parent_id
 

    function sendInfo(type,code=0){
        //創建對象
        var xhr = new XMLHttpRequest();
        //監聽ajax狀態
        xhr.onreadystatechange = function(){
            if(xhr.readyState==4){
                //處理數據，調用函數chulidata，傳的兩個參數xhr.responseText（從php頁面查詢的數據庫數據，形式為：110000,北京;120000,天津;） type select的id
                chulidata(xhr.responseText,type);
            }
        }
        
 
//創建一個新的http請求：以get的方式訪問php頁面，
        xhr.open("get",‘sanjiliandong.php?code=‘+code);
        //發送請求
        xhr.send(null);
    }
    //處理數據的函數，data：xhr.responseText（從php頁面查詢的數據庫數據） type：select的id
    function chulidata(data,type){
        //將從php頁面查詢的數據進行處理，去掉分隔符; 組成一個一維數組，形式為： [ "110000,北京", "120000,天津"]
        var arr1 = data.split(‘;‘),
            //定義一個變量：一個option標簽
            str = "<option value=‘‘>請選擇</option>";
        //遍歷數組
        for(var i=0;i<arr1.length;i++){
            //將數組中每個原素中的逗號去掉，組成的attr數組形式為：[[ "110000", "北京" ] , [ "120000", "天津" ]]
            attr[i] = arr1[i].split(‘,‘);
            //將attr數組裏的元素放到str的option標簽中
            str += "<option value=‘"+attr[i][0]+"‘>"+attr[i][1]+"</option>";
        }
        //將str放到相應的頁面位置顯示
        document.getElementById(type).innerHTML = str;
    }
    //在選擇省時調用的函數，obj是調用函數時傳過來的this
    function selshi(obj){
        //在選擇省時將區裏面的內容清空
        var str = "<option value=‘‘>請選擇</option>";
        document.getElementById(‘qu‘).innerHTML = str;
        //將市的select標簽的id和相應省標簽的value值在調用函數sendInfo時傳過去
        sendInfo(‘shi‘,obj.value);
    }
    //選擇市時調用的函數
    function selqu(obj){
        //將區的select標簽的id和相應市標簽的value值在調用函數sendInfo時傳過去
        sendInfo(‘qu‘,obj.value);
    }

php代碼部分：

<?php
$db = new MySQLi(‘localhost‘,‘root‘,‘‘,‘dt_area‘);
!mysqli_connect_error() or die(‘鏈接錯誤‘);
$db->query(‘set names utf8‘);
//以get方式提交過來的code，也就是數據庫表中的area_parent_id
$code = $_GET[‘code‘];
//數據庫查詢，條件是area_parent_id等於sendInfo函數裏面的xhr.open請求傳過來的code值
$sql = ‘select id,area_name from dt_area where area_parent_id = ‘.$code;
$res = $db->query($sql);
$arr = $res->fetch_all();

$str = "";
//for循環將查詢得到的$arr數組，變成 110000,北京;120000,天津 這樣的形式
foreach($arr as $key=>$value){
    foreach($value as $v){
        $str.=$v.",";
    }
    //去掉110000,北京,120000,天津, 最後面的逗號
    $str = substr($str,0,-1);
    //110000,北京;120000,天津;
    $str.= ‘;‘;
}
//去掉110000,北京;120000,天津; 最後面的分號
$str = substr($str,0,-1);
//最後輸出 110000,北京;120000,天津
echo $str;

省市區三級聯動 用ajax實現