1 <body> 2 <div id="box"> 3 <select name="sel1" id="sel1"> 4 <option value="year">年</option> 5 </select> 6 <select name="sel2" id="sel2"> 7 <option value="month">月</option> 8 </select> 9 <select name="sel3" id="sel3"> 10 <option value="day">日</option> 11 </select> 12 </div> 13 <script> 14 //生成日期 15 function creatDate() 16 { 17 //生成1900年-2100年 18 for(var i = 1900; i <= 2100; i++) 19 { 20 //创建select项 21 var option = document.createElement('option'); 22 option.setAttribute('value',i); 23 option.innerHTML = i; 24 sel1.appendChild(option); 25 } 26 //生成1月-12月 27 for(var i = 1; i <=12; i++){ 28 var option1 = document.createElement('option'); 29 option1.setAttribute('value',i); 30 option1.innerHTML = i; 31 sel2.appendChild(option1); 32 } 33 //生成1日—31日 34 for(var i = 1; i <=31; i++){ 35 var option2 = document.createElement('option'); 36 option2.setAttribute('value',i); 37 option2.innerHTML = i; 38 sel3.appendChild(option2); 39 } 40 } 41 creatDate(); 42 //保存某年某月的天数 43 var days; 44 //年份点击 绑定函数 45 sel1.onclick = function() 46 { 47 //月份显示默认值 48 sel2.options[0].selected = true; 49 //天数显示默认值 50 sel3.options[0].selected = true; 51 } 52 //月份点击 绑定函数 53 sel2.onclick = function() 54 { 55 //天数显示默认值 56 sel3.options[0].selected = true; 57 //计算天数的显示范围 58 //如果是2月 59 if(sel2.value == 2) 60 { 61 //判断闰年 62 if((sel1.value % 4 === 0 && sel1.value % 100 !== 0) || sel1.value % 400 === 0) 63 { 64 days = 29; 65 } 66 else 67 { 68 days = 28; 69 } 70 //判断小月 71 }else if(sel2.value == 4 || sel2.value == 6 ||sel2.value == 9 ||sel2.value == 11){ 72 days = 30; 73 }else{ 74 days = 31; 75 } 76 //增加或删除天数 77 //如果是28天，则删除29、30、31天(即使他们不存在也不报错) 78 if(days == 28){ 79 sel3.remove(31); 80 sel3.remove(30); 81 sel3.remove(29); 82 } 83 //如果是29天 84 if(days == 29){ 85 sel3.remove(31); 86 sel3.remove(30); 87 //如果第29天不存在，则添加第29天 88 if(!sel3.options[29]){ 89 sel3.add(new Option('29','29'),null) 90 } 91 } 92 //如果是30天 93 if(days == 30){ 94 sel3.remove(31); 95 //如果第29天不存在，则添加第29天 96 if(!sel3.options[29]){ 97 sel3.add(new Option('29','29'),null) 98 } 99 //如果第30天不存在，则添加第30天 100 if(!sel3.options[30]){ 101 sel3.add(new Option('30','30'),null) 102 } 103 } 104 //如果是31天 105 if(days == 31){ 106 //如果第29天不存在，则添加第29天 107 if(!sel3.options[29]) 108 { 109 sel3.add(new Option('29','29'),null) 110 } 111 //如果第30天不存在，则添加第30天 112 if(!sel3.options[30]) 113 { 114 sel3.add(new Option('30','30'),null) 115 } 116 //如果第31天不存在，则添加第31天 117 if(!sel3.options[31]) 118 { 119 sel3.add(new Option('31','31'),null) 120 } 121 } 122 } 123 </script> 124 </body>
