三级联动:

通过查询数据库,通过父级代号查询相应省市区.

在js页面实现三级联动

在JQuery中调用Ajax方法(引用JQuery文件一定放在最上面)

用插件的形式,创建三个下拉列表

 

主页面代码:

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

<body>

<h1>三级联动</h1>

<div id="sanji"></div>

</body>
</html>
View Code

引用的js代码:

// JavaScript Document
$(document).ready(function(e) {
    
    //在div里造三个下拉菜单
    $("#sanji").html("<select id='sheng'></select><select id='shi'></select><select id='qu'></select>");
    
    //填充数据
    Fillsheng();//填充省的数据
    Fillshi();//填充市的数据
    Fillqu();//填充区的数据
    
    
    //填充省的方法
    function Fillsheng()
    {
        var code = "0001";//省的父级代号
        //调用ajax查询省的数据
        $.ajax({
            
            async:false,//改为同步ajax
            
            url:"chili.php",
            data:{code:code},
            type:"POST",
            dataType:"TEXT",
            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查询市的数据
        $.ajax({
            
            async:false,//异步变同步ajax
            
            url:"chili.php",
            data:{code:code},
            type:"POST",
            dataType:"TEXT",
            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查询区的数据
        $.ajax({
            
            async:false,//异步变同步ajax
            
            url:"chili.php",
            data:{code:code},
            type:"POST",
            dataType:"TEXT",
            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

 

 


//同步异步
Ajax默认是异步的.
在Ajax里面
同步的是指在ajax处理数据的时候,必须等到处理完才能执行下面的语句
异步就是在ajax处理数据的时候,不用等到处理完 ,下面语句就可以执行

同步在交换信息时,必须等到对方确认接收后再发送下一条
异步在交换信息时,只管向对方发送,不用管对方有没有答复

表现在线程上,同步相当于单线程处理一个请求,
异步相当于多线程同时处理多个