HTML年月日联动下拉框实现示例

5星 · 超过95%的资源 需积分: 49 234 下载量 128 浏览量 更新于2024-11-11 4 收藏 3KB TXT 举报
"本篇文章主要介绍了如何在HTML页面上实现年月日三下拉框的联动功能,通过JavaScript编程实现动态更新和交互。首先,我们看到HTML部分包含三个`<select>`元素,分别对应年(YYYY)、月(MM)和日(DD),每个下拉框都设置有`onchange`事件,当用户在前两个下拉框中选择不同的年份或月份时,会触发相应的函数来更新其他下拉框的内容。 JavaScript代码部分的核心是`YYYYMMDDstart`函数,它执行的主要任务包括: 1. 初始化月份列表(MonHead),其中包含了不同月份的天数,考虑到闰年的特殊性。 2. 获取当前年份(`newDate().getFullYear()`),然后根据这个年份动态填充`YYYY`下拉框,添加选项直到指定的年份范围。 3. 设置`MM`下拉框为当前月份加一(`newDate().getMonth()+1`),并根据当前月份的天数调整`DD`下拉框的内容。 4. 判断是否为闰年,如果是闰年且选中的年份为闰年,增加2月的天数(`if(newDate().getMonth()==1&&IsPinYear(YYYYvalue))n++;`)。 5. 最后,更新`DD`下拉框的日期,使其显示为所选年月的实际天数。 文章中提到的`IsPinYear`函数可能是用于判断是否为闰年的辅助函数,但具体实现未在提供的内容中给出。这部分代码采用了IE浏览器的`attachEvent`或通用的`addEventListener`方法来确保在不同浏览器环境下的兼容性。 这篇文章提供了一个基础的前端开发示例,展示了如何通过HTML和JavaScript实现年月日三下拉框之间的数据联动,有助于开发者理解和实践表单验证和数据交互的相关技术。"
2012-04-27 上传
<HTML> <HEAD> <title>年月日三联动下拉框</title> <meta http-equiv='Content-Type' content='text/html; charset=gb2312'> <meta name='author' content='http://singlepine.cnblogs.com/'> </HEAD> <body> <form name="form1"> 请选择 年 选择 月 选择 日 </form> [removed]<!-- function YYYYMMDDstart() { MonHead = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]; //先给年下拉框赋内容 var y = new Date().getFullYear(); for (var i = (y-30); i < (y+30); i++) //以今年为准,前30年,后30年 document.form1.YYYY.options.add(new Option(" "+ i +" 年", i)); //赋月份的下拉框 for (var i = 1; i < 13; i++) document.form1.MM.options.add(new Option(" " + i + " 月", i)); document.form1.YYYY.value = y; document.form1.MM.value = new Date().getMonth() + 1; var n = MonHead[new Date().getMonth()]; if (new Date().getMonth() ==1 && IsPinYear(YYYYvalue)) n++; writeDay(n); //赋日期下拉框 document.form1.DD.value = new Date().getDate(); } if(document.attachEvent) window.attachEvent("onload", YYYYMMDDstart); else window.addEventListener('load', YYYYMMDDstart, false); function YYYYDD(str) //年发生变化时日期发生变化(主要是判断闰平年) { var MMvalue = document.form1.MM.options[document.form1.MM.selectedIndex].value; if (MMvalue == ""){ var e = document.form1.DD; optionsClear(e); return;} var n = MonHead[MMvalue - 1]; if (MMvalue ==2 && IsPinYear(str)) n++; writeDay(n) } function MMDD(str) //月发生变化时日期联动 { var YYYYvalue = document.form1.YYYY.options[document.form1.YYYY.selectedIndex].value; if (YYYYvalue == ""){ var e = document.form1.DD; optionsClear(e); return;} var n = MonHead[str - 1]; if (str ==2 && IsPinYear(YYYYvalue)) n++; writeDay(n) } function writeDay(n) //据条件写日期的下拉框 { var e = document.form1.DD; optionsClear(e); for (var i=1; i<(n+1); i++) e.options.add(new Option(" "+ i + " 日", i)); } function IsPinYear(year)//判断是否闰平年 { return(0 == year%4 && (year0 !=0 || year@0 == 0)); } function optionsClear(e) { e.options.length = 1; } //--> [removed] </body> </HTML>