效果图：
完整代码：
<html>
<head>
<title>年月日三下拉框联动</title>
<meta http-equiv='Content-Type' content='text/html; charset=gb2312'>
</head>
<body>
<form name=form1>
<select name=YYYY onchange="YYYYMM(this.value)">
<option value="">年</option>
</select>
<select name=MM onchange="MMDD(this.value)">
<option value="">月</option>
</select>
<select name=DD>
<option value="">日</option>
</select>
</form>
<script language="JavaScript">
window.onload = function(){
strYYYY = document.form1.YYYY.outerHTML;
strMM = document.form1.MM.outerHTML;
strDD = document.form1.DD.outerHTML;
MonHead = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
//先给年下拉框赋内容
var y = new Date().getFullYear();
var str = strYYYY.substring(0, strYYYY.length - 9);
for (var i = (y-30); i < (y+30); i++) //以今年为准，前30年，后30年
{
str += "<option value='" + i + "'> " + i + "</option>\r\n";
}
document.form1.YYYY.outerHTML = str +"</select>";
//赋月份的下拉框
var str = strMM.substring(0, strMM.length - 9);
for (var i = 1; i < 13; i++)
{
str += "<option value='" + i + "'> " + i + "</option>\r\n";
}
document.form1.MM.outerHTML = str +"</select>";
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();
}
function YYYYMM(str) //年发生变化时日期发生变化(主要是判断闰平年)
{
var MMvalue = document.form1.MM.options[document.form1.MM.selectedIndex].value;
if (MMvalue == ""){DD.outerHTML = strDD; 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 (str == ""){DD.outerHTML = strDD; return;}
var n = MonHead[str - 1];
if (str ==2 && IsPinYear(YYYYvalue)) n++;
writeDay(n)
}
function writeDay(n) //据条件写日期的下拉框
{
var s = strDD.substring(0, strDD.length - 9);
for (var i=1; i<(n+1); i++)
s += "<option value='" + i + "'> " + i + "</option>\r\n";
document.form1.DD.outerHTML = s +"</select>";
}
function IsPinYear(year)//判断是否闰平年
{ return(0 == year%4 && (year%100 !=0 || year%400 == 0))}
//--></script>
</body>
</html>
引自：
http://blog.csdn.net/wangzihu/article/details/7676877
分享到：
相关推荐
本文将详细介绍如何使用JavaScript实现一个简单的年、月、日三级联动的下拉菜单，并解释其工作原理。 #### 二、技术背景 在网页开发中，下拉菜单是一种常见的UI元素，它可以帮助用户快速选择某个选项。而在某些应用...
在实现年月日三级联动时，jQuery的主要作用在于动态更新下拉菜单，根据用户在前一个菜单中的选择来填充下一个菜单的内容。 1. **年份选择**：通常，我们会创建一个包含过去若干年和未来若干年的选项的下拉菜单。...
在网页开发中，用户输入是常见的一环，特别是在涉及到...总的来说，"jQuery年月日三级联动(生日)插件"是一个高效且实用的前端工具，它通过jQuery的强大功能，实现了年月日选择的便捷性，是网页开发中的一个良好实践。
在IT开发领域，"年月日三级联动下拉"是一种常见的日期选择组件，尤其适用于网页表单或应用程序的填写界面。这种设计模式提高了用户输入日期的效率和准确性，因为用户无需逐个输入年份、月份和日期，而是通过下拉菜单...
"JS实现的年月日三级联动下拉框日期选择效果源码.zip" 提供了一个利用JavaScript实现的年月日三级联动下拉框的解决方案。这种设计允许用户通过下拉菜单分别选择年、月、日，从而简化输入过程，提高用户体验。 首先...
该代码是用javascript实现年月日的联动 不用数据库 自动识别平年闰年 方便实用
总结一下，实现“JS年月日三级联动下拉框”主要涉及以下几个知识点： 1. JavaScript Date对象的使用，包括创建日期、获取和设置日期属性。 2. DOM操作，包括获取元素、创建和修改元素、添加和移除事件监听器。 3. 平...
【标题】"YMDClass年月日三级联动纯JS封装类精简插件"是一个用于网页表单的日期选择组件，旨在实现用户友好的交互体验。这个插件使用JavaScript编程语言，无需依赖其他库如jQuery，因此在轻量级项目中尤为适用。它...
在IT领域，尤其是在网页开发中，下拉菜单年月日...在压缩包中，"jQuery年月日三级联动(生日)"可能包含实现这个功能的源代码文件，包括HTML、CSS和JavaScript，开发者可以通过研究这些文件来学习如何构建类似的插件。
在JavaScript（JS）编程中，实现年月日三级联动下拉框日期选择是一种常见的需求，尤其是在网页表单或交互式用户界面中。这种设计允许用户通过三个下拉菜单分别选择年、月和日，形成一个完整的日期。在这个"JS年月日...
"jQuery年月日三级联动(生日)"是利用jQuery实现的一种常见交互功能，常见于用户注册或个人资料填写时选择出生日期的场景。这个功能通过下拉菜单的方式，依次显示年、月、日三个选项，用户可以根据需要逐级选择，形成...
在IT行业中，自定义样式三级联动通常指的是在前端开发中实现的一种交互效果，它涉及到用户界面的省市区选择以及年月日选择等多级下拉菜单。这种功能常见于需要用户输入详细地理位置或时间信息的场景，如在线报名、...
年月日三联动时间控件是一种常见的用户界面元素，它允许用户通过三个相互关联的下拉框分别选择年、月和日，以精确地输入日期。这种控件在各种Web应用和桌面应用中广泛使用，尤其适用于需要用户输入日期的情况。下面...
"JS年月日三级联动下拉框日期选择特效代码" 提供了一种实现方式，它通过JavaScript（JS）来创建一个包含年、月、日的三级下拉菜单，用户可以逐级选择，形成一个完整的日期。这种设计既简洁又直观，特别适用于那些...
在JavaScript编程中，实现日期三级联动下拉框选择菜单是一种常见的需求，特别是在处理用户输入日期信息的场景，如编辑生日等。这个功能的核心是通过JavaScript动态更新下拉框（Select元素）的选项，使得年、月、日...
通过这种方式，我们就创建了一个功能完整的年月日三级联动的日期选择器，它可以根据用户的选择动态调整日期范围，并在页面上实时显示选定的日期及其对应的星期。这个功能在网页表单和各种交互式界面中非常实用，可以...
本项目通过这三大框架实现了一个级联操作，具体涉及到了省市县以及年月日的选择，这种级联下拉菜单在实际应用中常常用于地址填写或日期选择等场景。 Struts2是基于MVC设计模式的Web框架，主要负责处理用户的请求和...
三级下拉列表框联动菜单? 24. 在JSP中如何调用浏览器中的"另存为"功能? 25. 网页全屏显示 26. 求两个日期相隔了多少天:输入时间格式为(yyyy-mm-dd) 27. 上传文件对话框 28. 分页测试 29. 下载...