// JavaScript Document 2010-06-03 zhoux
//年份下拉框Id,月份下拉框Id,日期下拉框Id,起始年(null则默认1970),结束年(null则默认当前年)
function TearoomRoom(year, month, day, startYear, endYear) {
if (null == startYear) {
startYear = "1970";
}
if (null == endYear) {
endYear = new Date().getFullYear();
}
//输出年
for (; startYear <= endYear; startYear++) {
$("#" + year).append("<option value=" + startYear + ">" + startYear + "</option>");
}
//输出月
for (var i = 1; i <= 12; i++) {
$("#" + month).append("<option value=" + ((i < 10) ? "0" + i : i) + ">" + i + "</option>");
}
//输出日期
if (null != day) {
$(document).ready(function () {//添加onchange事件
$("#" + year).change(function () {
displaySelectDay($("#" + year).val(), $("#" + month).val(), day);
});
$("#" + month).change(function () {
displaySelectDay($("#" + year).val(), $("#" + month).val(), day);
});
});
displaySelectDay($("#" + year).val(), $("#" + month).val(), day);
}
}
//是否是润年
function isLeapYear(year) {
if ((year % 4 == 0 && year % 100 != 0) || (year % 400 == 0)) {
return true;
}
return false;
}
//显示日下拉框
function displaySelectDay(year, month, selectDayId) {
if (null != year && null != month && !isNaN(year) && !isNaN(month)) {
var monthArr = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];//月份的天数
var day = (isLeapYear(year) && month == 2) ? monthArr[month - 1] + 1 : monthArr[month - 1];
$("#" + selectDayId + ">option").remove();//清空option项
for (var i = 1; i <= day; i++) {
$("#" + selectDayId).append("<option value=" + ((i < 10) ? "0" + i : i) + ">" + i + "</option>");
}
}
}
以上是一个方法,使用了JQuery 它针对id 添加onchange 事件，调用如下
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>年月日级联更新</title>
<script language="javascript" type="text/javascript" src="../JS/jquery-1.4.1.js"></script>
<script language="javascript" type="text/javascript" src="dateSelect.js"></script>
<script language="javascript" type="text/javascript">
//new TearoomRoom("year","month","day","1995","2020") 分别是年Id,月Id,日Id,起始年，终止年
$(document).ready(function(){$("#timeButton").click(function(){new TearoomRoom("year","month","day","1995","2020");});});
//如不输入起始年1970~当前年
//$(document).ready(function(){$("#timeButton").click(function(){new TearoomRoom("year","month","day",null,null);});});
//日期可以为null,此时不操作日期
//$(document).ready(function(){$("#timeButton").click(function(){new TearoomRoom("year","month",null,"1995","2020");});});
</script>
</head>
<body>
<select id="year" name="year">
</select>
<select id="month" name="month">
</select>
<select id="day" name="day">
</select>
<button type="button" id="timeButton">
设置时间
</button>
</body>
</html>
分享到：
相关推荐
用标准JavaScript实现的年月日下拉列表三级联动，支持IE6、FireFox3。
经典年月日三级联动 <html> <head> 年月日三下拉框联动 </title> ; charset=gb2312'> </head> <body> <form name=form1> (this.value)"> 请选择 年 </option> </select> (this.value)"> 选择 月 ...
在实现年月日三级联动时，jQuery的主要作用在于动态更新下拉菜单，根据用户在前一个菜单中的选择来填充下一个菜单的内容。 1. **年份选择**：通常，我们会创建一个包含过去若干年和未来若干年的选项的下拉菜单。...
在网页开发中，用户输入是常见的一环，特别是在涉及到...总的来说，"jQuery年月日三级联动(生日)插件"是一个高效且实用的前端工具，它通过jQuery的强大功能，实现了年月日选择的便捷性，是网页开发中的一个良好实践。
总之，"js年月日三级联动代码"是通过JavaScript监听年份选择的改变，动态生成对应的月份和日期选项，以实现日期选择的联动效果。这个功能在许多网页表单中都很常见，对于用户输入日期提供了便利。在实际开发中，我们...
"JQuery年月日三级下拉框联动"就是一个解决此类需求的方案，它利用JavaScript库JQuery的便利性和高效性，实现了用户在选择年份后，月份和日期下拉框自动更新的交互效果。这种方式可以提高用户体验，减少用户手动操作...
绝对好用，纯js的年月日三级联动（带平年闰年计算)
该代码是用javascript实现年月日的联动 不用数据库 自动识别平年闰年 方便实用
本文将详细讲解如何使用JavaScript实现年、月、日三级联动的下拉框日期选择器。 首先，我们需要理解“三级联动”这个概念。在年月日的日期选择器中，"三级联动"意味着当用户在一级（年份）下拉框中选择一个年份后，...
"前端年月日三级联动用到的js文件data.zip"是一个压缩包，其中包含了实现这种功能的JavaScript代码。这个组件在网页表单、事件预订、日期选择器等场景中非常常见，它能帮助用户方便地选取精确的日期。 首先，我们要...
在网页开发中，"年月日三级联动下拉列表"是一种常见的...通过以上步骤，我们可以实现一个完整的"年月日三级联动下拉列表"功能。这种设计提高了用户的输入效率，简化了日期选择的过程，是网页表单中常用的一种交互方式。
"JS实现的年月日三级联动下拉框日期选择效果源码.zip" 提供了一个利用JavaScript实现的年月日三级联动下拉框的解决方案。这种设计允许用户通过下拉菜单分别选择年、月、日，从而简化输入过程，提高用户体验。 首先...
【标题】"YMDClass年月日三级联动纯JS封装类精简插件"是一个用于网页表单的日期选择组件，旨在实现用户友好的交互体验。这个插件使用JavaScript编程语言，无需依赖其他库如jQuery，因此在轻量级项目中尤为适用。它...
总结一下，实现“JS年月日三级联动下拉框”主要涉及以下几个知识点： 1. JavaScript Date对象的使用，包括创建日期、获取和设置日期属性。 2. DOM操作，包括获取元素、创建和修改元素、添加和移除事件监听器。 3. 平...
总的来说，"年月日三级联动下拉"组件的实现涉及到前端开发的多个方面，包括HTML、CSS、JavaScript、以及现代前端框架的使用。在实际应用中，开发者需要结合业务需求和用户体验，对这些技术进行灵活运用。
一个直制的JQuery 年月日三级下拉框联动 使用方法非常简单 <title>JQuery 年月日三下拉框联动 <script src="jquery-1.4.2.min.js" type="text/javascript"> <script src="JQSelect.js" type="text/javascript...
在网页开发中，"JQuery+年月日三级下拉框联动"是一个常见的交互设计，主要用于用户输入日期的场景，例如填写表单时选择出生日期。这个设计涉及到JavaScript库JQuery的使用，以及HTML下拉框（select）的动态联动效果...
总的来说，jQuery年月日三级联动(生日) 插件通过JavaScript和jQuery的强大功能，提供了用户友好的日期选择界面，提高了网页交互的效率和准确性。其背后的逻辑包括DOM操作、事件监听、日期计算等多个方面，是学习和...
在JavaScript编程中，"年月日3级联动"通常指的是在一个网页表单中，用户选择日期时，下拉框会依次显示年、月、日，且每次选择一级后，下一级的选择项会根据上一级的选择动态更新。这种交互设计提高了用户体验，避免...