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>