JS实现年月日下拉框的联动

最新推荐文章于 2019-01-09 01:32:00 发布

summerpoppy

最新推荐文章于 2019-01-09 01:32:00 发布

阅读量2.3k

点赞数 4

分类专栏： JavaScript 文章标签： JS

本文链接：https://blog.csdn.net/summerpoppy/article/details/53939960

版权

JavaScript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

第一次写博客，刚学JS部分2天，新手写个年月日的下拉框。欢迎指正！

 <!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>

</head>

<body>
年<select onchange="setday()" id="year"></select>
月<select id="month" onchange="setday()"></select>
日<select id="day" onchange="setday()"></select>
</body>
<script type="text/javascript">
 //把年份加载进去
   var year = document.getElementById("year");
   for(var i = 1900 ; i <=2016 ; i ++){
       var options = document.createElement("option");
       options.innerHTML = i;
       year.appendChild(options);  
    }
</script>          

<script type="text/javascript">     
    //把月份加载进去
   var month = document.getElementById("month");
   for(var i = 1 ; i <=12 ; i ++){
       var options = document.createElement("option");
       options.innerHTML = i;
       month.appendChild(options);         
    }       
</script>

<script type="text/javascript">     
    //把天数加载进去
   var day = document.getElementById("day");
   for(var i = 1 ; i <=31 ; i ++){
       var options = document.createElement("option");
       options.innerHTML = i;
       day.appendChild(options);           
    }       
</script>



<script type="text/javascript">

    //根据年份，判断该月的具体天数，分为闰年
     function setday(){
       var specialyear ; //闰年的容器

        var year = document.getElementById("year");
        var yearIndex = year.selectedIndex;//获取选择年份的位置
        var yearSelect = year.options[yearIndex].text;//获取具体的年份
        if((yearSelect%4==0 && yearSelect%100!=0) || yearSelect%400==0)
             specialyear=yearSelect;//记下闰年   
            // alert(specialyear);

     //获取选择的月份
     var month = document.getElementById("month");
     var monthIndex = month.selectedIndex;
     var monthSelect = month.options[monthIndex].text;  
    // alert(monthSelect);         

    //加载天数  
       var day = document.getElementById("day");
       day.options.length=0;
       //alert(monthSelect);
       if(monthSelect=='1'||monthSelect=='3'||monthSelect=='5'||monthSelect=='7'||monthSelect=='8'||monthSelect=='10'||monthSelect=='12'){//这里数字要加引号
       for(var i = 1 ; i <=31 ; i ++){
       var options = document.createElement("option");
       options.innerHTML = i ;
       day.appendChild(options); 
           }        
           }
        // alert("day22");   
       if(monthSelect=='2'||monthSelect=='4'||monthSelect=='6'||monthSelect=='9'&&monthSelect=='11'){
         if(yearSelect==specialyear && monthSelect=='2') {
         for(var i = 1 ; i <=28 ; i ++){
        var options = document.createElement("option");
        options.innerHTML = i ;
        day.appendChild(options);    
         }
             } else{
        for(var i = 1 ; i <=30 ; i ++){
        var options = document.createElement("option");
        options.innerHTML = i ;
        day.appendChild(options); 
             }               
                 }             
    }
     }
</script>
</html>