Ajax三级联动

Posted 天照丶鼬

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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);

 

以上是关于Ajax三级联动的主要内容,如果未能解决你的问题,请参考以下文章

PHP ajax 实现三级联动

AJAX 三级联动例题

javaweb--json--ajax--mysql实现省市区三级联动(附三级联动数据库)

AJAX实现三级联动

多级联动系列——ajax调用XML实现三级联动

ajax三级联动下拉菜单