首页 > Web开发 > 详细

Ajax三级联动

时间:2016-05-20 11:17:34      阅读:209      评论:0      收藏:0      [点我收藏+]

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三级联动

原文:http://www.cnblogs.com/Itwonderful/p/5511042.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!