用ajax實現三級聯動

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<script src="../jq.js"></script>
<script src="sanji.js"></script>
</head>

<body>
<h1>三級聯動</h1>
<div id="sanji"></div>
</body>
</html>

07:38:10

$(document).ready(function(e) {
    //在div里面造三個下拉
    $("#sanji").html("<select id='sheng'></select><select id='shi'></select><select id='qu'></select>");
    //填充數據
    FillSheng();//填充省
    FillShi();//填充市
    FillQu();//填充區
    
    //同步異步，同步就是是指在AJAX處理數據的時候，必須等到處理完成才能執行下面的語句，異步就是在AJAX處理數據的時候，不用等到處理完，下面的語句就可以執行
    //同步在交換信息的時候，必須等到對方確認接收之后再發送下一條
    //異步在交換信息的時候，只管向對方發送，不用管對方有沒有答復
    //表現在線程上，同步相當於單線程處理一個請求，異步相當於多線程同時處理多個
    
    //填充省的方法
    function FillSheng()
    {
        var code="0001";
        $.ajax({
            async:false,//ajax變為同步
            url:"ChuLi.php",
            data:{code:code},
            type:'POST',
            dataType:"TEXT",
            success: function(data){
                
                var hang=data.split("|");
                var str="";
                for(var i=0;i<hang.length;i++)
                {
                    var lie=hang[i].split("^");
                    
                    str+="<option value='"+lie[0]+"'>"+lie[1]+"</option>"
                    
                    
                    
                }
                
                //將所有的option省下拉里面
                    $("#sheng").html(str);
                    
                
                
            }
            
            
            
            
            
            
            });
        
        
        }
        
        function FillShi()
    {
        var code=$("#sheng").val();
        $.ajax({
            async:false,//ajax變為同步
            url:"ChuLi.php",
            data:{code:code},
            type:'POST',
            dataType:"TEXT",
            success: function(data){
                
                var hang=data.split("|");
                var str="";
                for(var i=0;i<hang.length;i++)
                {
                    var lie=hang[i].split("^");
                    
                    str+="<option value='"+lie[0]+"'>"+lie[1]+"</option>"
                    
                    
                    
                }
                
                //將所有的option省下拉里面
                    $("#shi").html(str);
                    
                
                
            }
            
            
            
            
            
            
            });
        
        
        }
        function FillQu()
    {
        var code=$("#shi").val();
        $.ajax({
            async:false,//ajax變為同步
            url:"ChuLi.php",
            data:{code:code},

<?PHP

include("class.php");
$db=new DBDA();

$pcode=$_POST["code"];

$sql="select AreaCode,AreaName from ChinaStates where ParentAreaCode='{$pcode}'" ;

$str=$db->StrQuery($sql);

echo $str; 

 

            type:'POST',
            dataType:"TEXT",
            success: function(data){
                
                var hang=data.split("|");
                var str="";
                for(var i=0;i<hang.length;i++)
                {
                    var lie=hang[i].split("^");
                    
                    str+="<option value='"+lie[0]+"'>"+lie[1]+"</option>"
                    
                    
                    
                }
                
                //將所有的option省下拉里面
                    $("#qu").html(str);
                    
                
                
            }
            
            
            
            
            
            
            });
        
        
        }
        //當省的選中發生變化的時候，去改變市和區
    $("#sheng").change(function(){
            FillShi();
            FillQu();
        })
        
    //當市的選中發生變化的時候，去改變區
    $("#shi").change(function(){
            FillQu();
        })
});