代码
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 2 <html> 3 <head> 4 <title> New Document </title> 5 <meta name="Generator" content="EditPlus"> 6 <meta name="Author" content=""> 7 <meta name="Keywords" content=""> 8 <meta name="Description" content=""> 9 <script type="text/javascript"> 10 function load() { 11 var i = -1; 12 //添加年份，从1900年开始 13 var nowyear = new Date().getFullYear(); 14 var nowmonth = new Date().getMonth()+1; 15 //var nowday = new Date().getDate(); 16 for (i = 1900; i <= nowyear; i++) { 17 addOption(form1.Year, i, i - 0); 18 //默认选中当前年份 19 if (i == nowyear) { 20 form1.Year.options[i-1900].selected = true; 21 } 22 } 23 //添加月份 24 for (i = 1; i <= 12; i++) { 25 addOption(form1.Month, i, i); 26 //默认选中当前月份 27 if(i == nowmonth){ 28 form1.Month.options[i-1].selected = true; 29 } 30 } 31 //添加日期 32 for (i = 1; i <= 31; i++) { 33 addOption(form1.Day, i, i); 34 } 35 } 36 37 //设置每个月份的天数 38 function setDays(year, month,day) { 39 var monthDays = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]; 40 var yea = year.options[year.selectedIndex].text; 41 var mon = month.options[month.selectedIndex].text; 42 var num = monthDays[mon - 1]; 43 if (mon == 2 && isLeapYear(yea)) { 44 num++; 45 } 46 for (var i = day.options.length - 1; i >=num; i--) { 47 day.remove(i); 48 } 49 for (var i = 1; i <= num; i++) { 50 addOption(form1.Day,i,i); 51 } 52 } 53 54 //判断是否闰年 55 function isLeapYear(year) 56 { 57 return (year % 4 == 0 || (year % 100 == 0 && year % 400 == 0)); 58 } 59 60 //向select尾部添加option 61 function addOption(selectbox, text, value) { 62 var option = document.createElement("option"); 63 option.text = text; 64 option.value = value; 65 selectbox.options.add(option); 66 } 67 </script> 68 </head> 69 70 <body onload="load()"> 71 <form id="form1" action="#" name="form1"> 72 <select name="year" id="Year" 73 onchange="setDays(this,form1.Month,form1.Day)"></select> 74 <label>年</label> 75 <select name="month" id="Month" 76 onchange="setDays(form1.Year,this,form1.Day)" ></select> 77 <label>月</label> 78 <select name="day" id="Day"></select> 79 <label>日</label> 80 </form> 81 </body> 82 </html>
效果：
