• 三级联动 下拉菜单式


    ①sanji2.php  主页面

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <script src="jquery-1.11.2.min.js"></script>
        <script src="sanji2.js"></script>
    </head>
    <body>
        <h1>三级联动</h1>
        <div id="sanji"></div>
    </body>
    </html>

    ②sanjichuli2.php

    <?php 
    include("../DBDA.php");
    $db=new DBDA();
    $pcode=$_POST["code"];
    $sql="select * from ChinaStates where ParentAreaCode='{$pcode}'";
    echo $db->Ajaxquery($sql);
     
     ?>

    ③sanji2.js

    $(document).ready(function(e){
        //在div里面造三个下拉
        $("#sanji").html("<select id='sheng'></select><select id='shi'></select><select id='qu'></select>");
        //填充数据
        Fillsheng(); //填充省的数据
        Fillshi();    //填充市的数据
        Fillqu();    //填充区的数据
        //同步异步
        //同步是指在Ajax处理数据的时候,必须等到处理完才能执行下面的语句,
        //异步是在Ajax处理数据的时候,不用等到处理完,下面的语句就可以执行
        //同步在交换信息的时候,必须等到对方确认之后再发送一条
        //异步在交换信息的时候,只管向对方发送,不用管对方有没有答复
        //表现在线程上,同步相当于单线程处理一个请求,异步相当于多线程同时处理多个数据
        //当省的选中发生变化的时候,去改变市和区
        $("#sheng").change(function(){
                    Fillshi();
                    Fillqu();
        })
        $("#shi").change(function(){
                Fillqu();
        })
        //填充省的方法
            function Fillsheng()
            {
                var code="0001";//省的父级代号
                $.ajax({
                    async:false,//默认true是异步   false是同步
                    url:"sanjichuli2.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>";
                        }
                        $("#sheng").html(str);
                    }
                });
            }
            function Fillshi()
            {
                var code=$("#sheng").val();//市的父级代号 ???
                $.ajax({
                    async:false,
                    url:"sanjichuli2.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>";
                        }
                        $("#shi").html(str);
                    }
                });
    
            }
            function Fillqu()
            {
                var code=$("#shi").val();//市的父级代号 ???
                $.ajax({
                    async:false,
                    url:"sanjichuli2.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>";
                        }
                        $("#qu").html(str);
                    }
                });
    
            }
            
    
    });

  • 相关阅读:
    多机部署之定时任务完整方案
    老项目多机部署初步解决方案
    java多线程与线程池
    HotSpot项目结构
    调试HotSpot源代码
    在Ubuntu 16.04上编译OpenJDK8的源代码
    研究Java语言的编译器和虚拟机可参阅的资料
    我的书籍《深入解析Java编译器:源码剖析与实例详解》就要出版了
    hotspot编译
    研究小技巧及专业术语
  • 原文地址:https://www.cnblogs.com/zhanghaozhe8462/p/5523410.html
Copyright © 2020-2023  润新知