Ajax三级联动

Ajax 三 级 联 动：

主要实现在下拉列表里中地区的选择

---

JS代码：

---

// JavaScript Document
$(document).ready(function(e) {
    
    $("#sj").html("<select id='sheng'></select><select id='shi'></select><select id='qu'></select>"); //制作三个下拉列表
    
    //填充内容
    //1.省
    FillSheng();
    //2.市
    FillShi();    
    //3.区
    FillQu();
    
    //省变化，市区跟着变
    $("#sheng").change(function ()
    {
        
        //改变市
        FillShi();    
        //改变区
        FillQu();
    })
    
    //市变化，区跟着变
    $("#shi").change(function ()
    {
        
        
        
        //改变区
        FillQu();
    })
    
    
    //填充省的方法
    function FillSheng ()
    {
        //找到父级代号
        var Pcode = "0001";
        //调用Ajax
        $.ajax({
             async:false,
             url:"5.20cl.php",
             data:{Pcode:Pcode},
             type:"POST",
             dataType:"TEXT",
             success: function(d)
             {
                var str ="";
                var hang = d.split("|");
                for(var i = 0 ; i<hang.length;i++)
                {
                    var lie =hang[i].split("^");
                    str += "<option value='"+lie[0]+"'>"+lie[1]+"</option>";
                }
                
                $("#sheng").html(str);
             }
            
            
            
            
              })
    }
    //填充市的方法
        function FillShi ()
    {
        //找到父级代号
        var Pcode = $("#sheng").val(); //市的父级代号 是省的下拉列表中的value值
        //调用Ajax
        $.ajax({
             async:false,
             url:"5.20cl.php",
             data:{Pcode:Pcode},
             type:"POST",
             dataType:"TEXT",
             success: function(d)
             {
                var str ="";
                var hang = d.split("|");
                for(var i = 0 ; i<hang.length;i++)
                {
                    var lie =hang[i].split("^");
                    str += "<option value='"+lie[0]+"'>"+lie[1]+"</option>";
                }
                
                $("#shi").html(str);
                 
             }
            
            
            
            
              })
    }
    
    //填充区的方法
        function FillQu ()
    {
        //找到父级代号
        var Pcode = $("#shi").val(); //区的父级代号 是市的下拉列表中的value值
        //调用Ajax
        $.ajax({
             async:false,
             url:"5.20cl.php",
             data:{Pcode:Pcode},
             type:"POST",
             dataType:"TEXT",
             success: function(d)
             {
                var str ="";
                var hang = d.split("|");
                for(var i = 0 ; i<hang.length;i++)
                {
                    var lie =hang[i].split("^");
                    str += "<option value='"+lie[0]+"'>"+lie[1]+"</option>";
                }
                
                $("#qu").html(str); 
             }
            
            
            
            
              })
    }
});

---

PHP处理代码：

---

<?php

$Pcode = $_POST["Pcode"];
include ("database.class.php");
$db = new database();

$sql = "select AreaCode,AreaName,ParentAreaCode from ChinaStates where ParentAreaCode='{$Pcode}'";
echo $db->str_ajax($sql);

---

JS简化代码：

---

$(document).ready(function(e) {
    
    $("#sj").html("<select id='sheng'></select><select id='shi'></select><select id='qu'></select>"); //制作三个下拉列表
    
    //填充内容
    //1.省
    Fill ('0001','#sheng');
    //2.市
    Fill ($("#sheng").val(),'#shi');    
    //3.区
    Fill ($("#shi").val(),'#qu');
    
    //省变化，市区跟着变
    $("#sheng").change(function ()
    {
        //改变市
        Fill ($("#sheng").val(),'#shi');    
        //改变区
        Fill ($("#shi").val(),'#qu');
    })
    
    //市变化，区跟着变
    $("#shi").change(function ()
    {

        //改变区
        Fill ($("#shi").val(),'#qu');
    })
    
    
    //简便方法
    function Fill (Pcode,id)
    {
        $.ajax({
            
            async:false,
            url:"5.20cl.php",
            data:{Pcode:Pcode},
            type:"POST",
            dataType:"TEXT",
            success: function(d)
            {
                
                var str = "";
                var hang = d.split("|");
                for(var i = 0; i<hang.length; i++)
                {
                    var lie = hang[i].split("^");
                    str += "<option value='"+lie[0]+"'>"+lie[1]+"</option>";
                }
                $(id).html(str);
            }
            
            
            
            
            })
    }

});