年月日的三级联动

  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>