example_Jquery Ajax + php 三级联动

sanji.php

<!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" />
<script src="../jquery-2.2.2.min.js"></script>
<script src="sanji.js"></script>
<title>无标题文档</title>
</head>

<body>

<h1>三级联动</h1>

<div id="sj"></div>
</body>
</html>
View Code

sanji.js

// JavaScript Document
$(document).ready(function(e) {
    
    //在DIV里造下拉菜单
    $("#sj").html("<select id='sheng'></select><select id='shi'></select><select id='qu'></select>");
    
    //填充数据
    FillSheng();  //填充省的数据
    FillShi();      //填充市的数据
    FillQu();        //填充区的数据
        
            //填充省的方法
                function FillSheng()
    {
        var code = "0001";  //省的父级代号
        
        $.ajax({
            
            url:"chuli.php",
            data:{code:code},
            type:"POST",
            dataType:"TEXT",
            async:false,
            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({
            
            url:"chuli.php",
            data:{code:code},
            type:"POST",
            dataType:"TEXT",
            async:false,
            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({
            
            url:"chuli.php",
            data:{code:code},
            type:"POST",
            dataType:"TEXT",
            async:false,
            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();
        
    });
    

});
View Code

chuli.php

<?php

include("../DBDA.php");

$con = new DBDA();

$pcode = $_POST["code"];

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

echo $con->Query_string($sql);


?>
View Code

 

posted @ 2016-04-07 21:51  司会铭  阅读(297)  评论(0)  编辑  收藏  举报