Ajax三级联动

Posted 2020-07-08 天照丶鼬

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);