js实现下拉框联动选中日期

html code:

代码
1 <form id="FormDate" action="#" name="form1">
2 <select name="year" id="Year"
3 onchange="setDays(this,FormDate.Month,FormDate.Day)"></select>
4 <label>year</label>
5 <select name="month" id="Month"
6 onchange="setDays(FormDate.Year,this,FormDate.Day)" ></select>
7 <label>month</label>
8 <select name="day" id="Day"></select>
9 <label>day</label>
10    </form>

js code:

代码
1 <script type="text/javascript">
2 $(function () {
3 var i = -1;
4 //添加年份,从1910年开始
5   for (i = 1910; i <= new Date().getFullYear(); i++) {
6 addOption(FormDate.Year, i, i - 1909);
7 //默认选中1988年
8 if (i == 1988) {
9 FormDate.Year.options[i-1910].selected = true;
10 }
11 }
12 //添加月份
13 for (i = 1; i <= 12; i++) {
14 addOption(FormDate.Month, i, i);
15 }
16 //添加天份,先默认31天
17 for (i = 1; i <= 31; i++) {
18 addOption(FormDate.Day, i, i);
19 }
20 });
21
22 //设置每个月份的天数
23 function setDays(year, month,day) {
24 var monthDays = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
25 var yea = year.options[year.selectedIndex].text;
26 var mon = month.options[month.selectedIndex].text;
27 var num = monthDays[mon - 1];
28 if (mon == 2 && isLeapYear(yea)) {
29 num++;
30 }
31 for (var i = day.options.length - 1; i >=num; i--) {
32 day.remove(i);
33 }
34 for (var i = 1; i <= num; i++) {
35 addOption(FormDate.Day,i,i);
36 }
37 }
38
39 //判断是否闰年
40 function isLeapYear(year)
41 {
42 return (year % 4 == 0 || (year % 100 == 0 && year % 400 == 0));
43 }
44
45 //向select尾部添加option
46 function addOption(selectbox, text, value) {
47 var option = document.createElement("option");
48 option.text = text;
49 option.value = value;
50 selectbox.options.add(option);
51 }
52 </script>

在公司里实习,要求每天写日报,开始时不胜其烦,现在倒是有点习惯,我也就继续保持并扩展一下,用于博客总结。

总结:

1.编写C#,有智能提示功能,而js没有,总是用种不安全感,自己写的是错误的。

2.js语法与C#的差别很大,定义循环变量时总是会写成int,狂晕。

3.学会动态的添加删除select中的option。

虽然说比较简单,但语法不熟悉以及受其他编程语言思维的影响,发现自己也花费三四个小时,呜呼哀哉!

原文地址:https://www.cnblogs.com/qingliuyu/p/1857586.html