• AJAX部分---对比js做日期的下拉选择 和 ajax做三级联动;


    js做日期选择:

    实现当前年份的前5后5年的日期选择
    
    实现功能:年份和月份页面加载完成使用JS循环添加,天数根据月份的变化动态添加改变
    
    扩展功能:天数可以根据闰年平年变化
    
     
    
    
    <body>
    
    <select id="nian" onclick="biantian()"></select><select id="yue" onclick="biantian()"></select><select id="tian"></select><script type="text/javascript">
    FillNian();
    FillYue();
    FillTian();
    function FillNian()
    {
        var b = new Date(); //获取当前时间
        var nian = parseInt(b.getFullYear());  //把年份强制转换为整型
        
        var str = "";
        
        for(var i=nian-5;i<nian+6;i++)
        {
            str = str+"<option value='"+i+"'>"+i+"</option>";//添加<option>标签
        }
        
        document.getElementById("nian").innerHTML = str;
        
    }
    
    function FillYue()
    {
        var str = "";
        for(var i=1;i<13;i++)
        {
            str = str+"<option value='"+i+"'>"+i+"</option>";
        }
        document.getElementById("yue").innerHTML = str;
    }
    
    function FillTian()
    {
        var yue = document.getElementById("yue").value;
        var nian = document.getElementById("nian").value;
        var ts = 31;
        
        if(yue==4 || yue==6 || yue==9 || yue==11)        //判断月份
        {
            ts=30;
        }
        
        if(yue==2)                                          //如果是2月的话,里面要判断是不是闰年
        {
            if((nian%4==0 && nian%100 != 0) || nian%400==0)
            {
                ts = 29;
            }
            else
            {
                ts = 28;
            }
        }
        
        var str = "";
        for(var i=1;i<ts+1;i++)
        {
            str = str+"<option value='"+i+"'>"+i+"</option>";
        }
        document.getElementById("tian").innerHTML = str;
    
        
        
    }
    
    
    function biantian()
    {
        FillTian();
    }
    </script>
    </body>

    ajax做三级联动:

    当dataType:"text"时,返回的数据是这样的,所以下面的split根据“|”和“^”来分割

    1.主页面做一个div,存储三个下拉列表,并引入jquery和js

    <script src="jquery-1.11.2.min.js"></script>
    <script src="sanjiliandong.js"></script>
    </head>
    
    <body>
    <div id="sanji"></div>
    </body>

    2.做一个纯js页面

    // JavaScript Document
    $(document).ready(function(e) {
        //往页面id=sanji的div里面放三个下拉列表
        var str="<select id='sheng'></select><select id='shi'></select><select id='qu'></select>";
        $("#sanji").html(str);
        
        fillsheng();    //页面加载完,自动执行三个方法
        fillshi();
        fillqu();
        
        $("#sheng").change(function(){    //当id=sheng的div改变时,触发市和区的方法
            
            fillshi();
            fillqu();
            });
            $("#shi").change(function(){   //当id=shi的div改变时,触发区的方法
    
                fillqu();
                });
        
        //造一个填充省的方法
        function fillsheng()
        {
            pcode="0001";     //数据库中省份的parentareacode都是0001
            
            $.ajax({
                async:false,                        //因为要同时执行下边函数,所以这里要设置为同步。
                url:"sanjichuli.php",
                data:{pcode:pcode},
                type:"POST",
                dataType:"text",
                success:function(data){
                    
                    var hang=data.split("|");  //hang是二维数组
                    var str="";
                    for(var i=0;i<hang.length;i++)
                    {
                        var lie=hang[i].split("^");
                        str=str+"<option value='"+lie[0]+"'>"+lie[1]+"</option>";
                        }
                    $("#sheng").html(str);
    
                    }
                });
            }
            
            //添加一个市的方法
            function fillshi()
            {
                pcode=$("#sheng").val();              //代号取上一级的value值
                $.ajax({
                    async:false,                         //为了下边的区能执行,这里要设置为同步
                    url:"sanjichuli.php",
                    data:{pcode:pcode},
                    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=str+"<option value='"+lie[0]+"'>"+lie[1]+"</option>";
                            }
                        $("#shi").html(str);
                        }
                    
                    
                    });
    
                }
                
                
             //添加一个区方法    
            function fillqu()
            {
                pcode=$("#shi").val();
                
                $.ajax({
                    
                    url:"sanjichuli.php",
                    data:{pcode:pcode},
                    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=str+"<option value='"+lie[0]+"'>"+lie[1]+"</option>";
                            }
                        $("#qu").html(str);
                        }
                    });
                
                
                
                }    
    });

    3.做一个处理页面

    <?php
    $pcode=$_POST['pcode'];
    include("DBDA.class.php");
    $db=new DBDA();
    $sql="select * from chinastates where parentareacode='{$pcode}'";
    echo $db->StrQuery($sql);
  • 相关阅读:
    php操作redis报错Redis::__set_state(array( 'socket' => NULL, ))
    vue项目新部署ERROR Error: Cannot find module 'webpack/lib/rules/DescriptionDataMatcherRulePlugin'
    dubbo注册到 zookeeper + 使用apollo配置中心整合
    @ConfigurationProperties注解的使用
    centos下安装 clickhouse
    Linux脚本中使用特定JDK
    几种主流的分布式定时任务
    c++ 左值引用与右值引用
    H264文件读取帧数据
    网络丢包分析
  • 原文地址:https://www.cnblogs.com/xingyue1988/p/6225804.html
Copyright © 2020-2023  润新知