原生JS 下拉列表联动（年、月、日）

 

要点

1：year、month、day在页面加载时就导入

2：day列表随着year、month的改变而改变(是否闰年、每个月有多少天)

html代码：

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title>年月日</title>
    <script type="text/javascript" src="changeDate.js">
    </script>
</head>
<body>
<select name="year" onchange="inDate()" id="yy">
</select>
<select name="month" onchange="inDate()" id="month">
</select>
<select name="day" id="day">
</select>
</body>
</html>

 

Js代码：

window.onload=function () {
inYear();
inMonth();
inDay();
}
<!---插入year列表--->
function inYear() {
    var pro1 = document.getElementById("yy");
    <!--在 FF等浏览器内getYear()返回的是当前年份-1900的值，使用getFullYear()可以兼容FF和IE-->
    var year = new Date().getFullYear();
    var year1 = new Array();
    for (var i = year - 30; i <= year + 30; i++) {
        year1[i - (year - 30)] = new Option(i);
        pro1.options[i - (year - 30)] = year1[i - (year - 30)];
    }
}
<!---插入month列表--->
function inMonth() {
    var pro2 = document.getElementById("month");
    for (var i = 1; i <= 12; i++) {
        pro2.options[i - 1] = new Option(i);
    }
}
<!---插入day列表--->
function inDay(){
    var pro3=document.getElementById("day");
    for(var i = 1; i <= 31; i++){
        pro3.options[i-1]=new Option(i);
    }
}
<!---动态更新day列表方法--->
function  append(x,y){
    var option=new Option(y,y);
    x.options.add(option);
}
function  inDate(){
    var y = document.getElementsByName("year")[0].value;
    var m = document.getElementsByName("month")[0].value;
    var day=document.getElementsByName("day")[0];
    day.innerHTML="";

    if(m==1||m==3| m==5||m==7||m==8||m==10||m==12){
        for(var j = 1; j <= 31; j++){
            append(day,j);
        }
    }
    else if(m==4||m==6||m==9||m==11){
        for(var j = 1; j <= 30; j++){
            append(day,j);
        }
    }
    else if(m==2){
        var flag=(y%4==0)&&(y%100!=0)||(y%400==0);
        if(flag){
            for(var j = 1; j <= 29; j++){
                append(day,j);
            }
        }
        else{
            for(var j = 1;j <= 28; j++){
                append(day,j);
            }
        }
    }
}

 

　　

posted @ 2017-08-31 10:32  Wen93  阅读(401)  评论(0)    收藏  举报