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);

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

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