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>
