zoukankan      html  css  js  c++  java
  • 实现三级联动

    三级联动:

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

    在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处理数据的时候,不用等到处理完 ,下面语句就可以执行

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

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

  • 相关阅读:
    Linux性能监测:磁盘IO篇
    Linux性能监测:网络篇
    Linux性能监测:内存篇
    Linux系统和性能监控之CPU篇
    linux 进程和线程讲解
    web-单机时代
    自动化-ELK日志管理
    自动化--zabbix-proxy
    自动化-zabbix(2)
    IOS中的用户安全
  • 原文地址:https://www.cnblogs.com/sjxx/p/5365058.html
Copyright © 2011-2022 走看看