js处理年月日下拉菜单变化

  1. function onload()  
  2. {     
  3.     var now = new Date();  
  4.     var year = now.getYear();//获得年份,不过是1900年到现在的数值  
  5.     year = year + 1900 - 18;//因为要4位数字年份又要求使用者大于18岁  
  6.     var yearList = document.getElementById("yearList");  
  7.     for(var i = 0;i < (year-(year - 80));i++){//为年份下拉菜单倒序输出年份  
  8.         var addYear = year - i;  
  9.         yearList.options[i] = new Option(addYear,addYear);  
  10.     }  
  11.     yearChange();  
  12.           
  13. }  
  14.   
  15.   
  16. /** 
  17.  *  年份改变,没啥好说的,月日下拉菜单清空重排就行了 
  18.  */  
  19. function yearChange(){    
  20.     var monthList = document.getElementById("monthList");  
  21.     monthList.innerHTML = "";  
  22.     for(var i = 0;i < 12;i++){  
  23.         monthList.options[i] = new Option(i+1,i+1);   
  24.     }     
  25.     var dayList = document.getElementById("dayList");  
  26.     dayList.innerHTML = "";  
  27.     for(var i = 0;i < 31;i++){  
  28.         dayList.options[i] = new Option(i+1,i+1);  
  29.     }  
  30. }  
  31.   
  32. /** 
  33.  *  月份改变 
  34.  */  
  35. function monthChange(m){//m为改变的月份值  
  36.     var year = parseInt(document.getElementById("yearList").value);//转为整形  
  37.     var day = 31;  
  38.     switch(parseInt(m))//做一下月份的判断,为日期复制  
  39.     {  
  40.         case 1,3,5,7,8,10,12:day = 31;break;  
  41.         case 2:day = 28;break;  
  42.         case 4,6,9,11:day = 30;break;  
  43.     }  
  44.     if(day == 28)//二月份的情况下  
  45.     {  
  46.         if ((year%4==0 && year%100!=0) || (year%400==0))//闰年公式,判断是否为闰年  
  47.         {  
  48.             day = 29;  
  49.         }  
  50.     }  
  51.     var dayList = document.getElementById("dayList");  
  52.     dayList.innerHTML = "";  
  53.     for(var i = 0;i < day;i++)  
  54.     {  
  55.         dayList.options[i] = new Option(i+1,i+1);  
  56.     }  
  57. }  

html代码

[html] view plaincopy
  1. <select id="yearList" class="yearSelect" onchange="yearChange()"></select>  
  2. <select id="monthList" class="nonYearSelect" onchange="monthChange(this.value)"></select>  
  3. <select id="dayList" class="nonYearSelect"></select> 
发布了15 篇原创文章 · 获赞 2 · 访问量 3万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览