`
zhouxianglh
  • 浏览: 267582 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

javaScript 实现的年月日三级联动

阅读更多
// 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>
  • Web.rar (160.2 KB)
  • 下载次数: 101
0
3
分享到:
评论
1 楼 cgslp0911 2011-03-02  
有错啊!!

相关推荐

    用JavaScript写的年月日三级联动

    用标准JavaScript实现的年月日下拉列表三级联动,支持IE6、FireFox3。

    javascript经典年月日三级联动

    经典年月日三级联动 &lt;html&gt; &lt;head&gt; 年月日三下拉框联动 &lt;/title&gt; ; charset=gb2312'&gt; &lt;/head&gt; &lt;body&gt; &lt;form name=form1&gt; (this.value)"&gt; 请选择 年 &lt;/option&gt; &lt;/select&gt; (this.value)"&gt; 选择 月 ...

    jquery年月日三级联动

    在实现年月日三级联动时,jQuery的主要作用在于动态更新下拉菜单,根据用户在前一个菜单中的选择来填充下一个菜单的内容。 1. **年份选择**:通常,我们会创建一个包含过去若干年和未来若干年的选项的下拉菜单。...

    jQuery年月日三级联动(生日)插件

    在网页开发中,用户输入是常见的一环,特别是在涉及到...总的来说,"jQuery年月日三级联动(生日)插件"是一个高效且实用的前端工具,它通过jQuery的强大功能,实现了年月日选择的便捷性,是网页开发中的一个良好实践。

    js年月日三级联动代码

    总之,"js年月日三级联动代码"是通过JavaScript监听年份选择的改变,动态生成对应的月份和日期选项,以实现日期选择的联动效果。这个功能在许多网页表单中都很常见,对于用户输入日期提供了便利。在实际开发中,我们...

    JQuery年月日三级下拉框联动

    "JQuery年月日三级下拉框联动"就是一个解决此类需求的方案,它利用JavaScript库JQuery的便利性和高效性,实现了用户在选择年份后,月份和日期下拉框自动更新的交互效果。这种方式可以提高用户体验,减少用户手动操作...

    javascript年月日三级联动带平年闰年计算

    绝对好用,纯js的年月日三级联动(带平年闰年计算)

    年月日三级联动(带平年闰年计算)

    该代码是用javascript实现年月日的联动 不用数据库 自动识别平年闰年 方便实用

    JS年月日三级联动下拉框日期选择代码

    本文将详细讲解如何使用JavaScript实现年、月、日三级联动的下拉框日期选择器。 首先,我们需要理解“三级联动”这个概念。在年月日的日期选择器中,"三级联动"意味着当用户在一级(年份)下拉框中选择一个年份后,...

    前端年月日三级联动用到的js文件data.zip

    "前端年月日三级联动用到的js文件data.zip"是一个压缩包,其中包含了实现这种功能的JavaScript代码。这个组件在网页表单、事件预订、日期选择器等场景中非常常见,它能帮助用户方便地选取精确的日期。 首先,我们要...

    年月日三级联动下拉列表

    在网页开发中,"年月日三级联动下拉列表"是一种常见的...通过以上步骤,我们可以实现一个完整的"年月日三级联动下拉列表"功能。这种设计提高了用户的输入效率,简化了日期选择的过程,是网页表单中常用的一种交互方式。

    JS实现的年月日三级联动下拉框日期选择效果源码.zip

    "JS实现的年月日三级联动下拉框日期选择效果源码.zip" 提供了一个利用JavaScript实现的年月日三级联动下拉框的解决方案。这种设计允许用户通过下拉菜单分别选择年、月、日,从而简化输入过程,提高用户体验。 首先...

    YMDClass年月日三级联动纯JS封装类精简插件

    【标题】"YMDClass年月日三级联动纯JS封装类精简插件"是一个用于网页表单的日期选择组件,旨在实现用户友好的交互体验。这个插件使用JavaScript编程语言,无需依赖其他库如jQuery,因此在轻量级项目中尤为适用。它...

    JS年月日三级联动下拉框

    总结一下,实现“JS年月日三级联动下拉框”主要涉及以下几个知识点: 1. JavaScript Date对象的使用,包括创建日期、获取和设置日期属性。 2. DOM操作,包括获取元素、创建和修改元素、添加和移除事件监听器。 3. 平...

    年月日三级联动下拉

    总的来说,"年月日三级联动下拉"组件的实现涉及到前端开发的多个方面,包括HTML、CSS、JavaScript、以及现代前端框架的使用。在实际应用中,开发者需要结合业务需求和用户体验,对这些技术进行灵活运用。

    JQuery 年月日三级下拉框联动

    一个直制的JQuery 年月日三级下拉框联动 使用方法非常简单 &lt;title&gt;JQuery 年月日三下拉框联动 &lt;script src="jquery-1.4.2.min.js" type="text/javascript"&gt; &lt;script src="JQSelect.js" type="text/javascript...

    JQuery+年月日三级下拉框联动

    在网页开发中,"JQuery+年月日三级下拉框联动"是一个常见的交互设计,主要用于用户输入日期的场景,例如填写表单时选择出生日期。这个设计涉及到JavaScript库JQuery的使用,以及HTML下拉框(select)的动态联动效果...

    jQuery年月日三级联动(生日) 插件

    总的来说,jQuery年月日三级联动(生日) 插件通过JavaScript和jQuery的强大功能,提供了用户友好的日期选择界面,提高了网页交互的效率和准确性。其背后的逻辑包括DOM操作、事件监听、日期计算等多个方面,是学习和...

    js的年月日3级联动

    在JavaScript编程中,"年月日3级联动"通常指的是在一个网页表单中,用户选择日期时,下拉框会依次显示年、月、日,且每次选择一级后,下一级的选择项会根据上一级的选择动态更新。这种交互设计提高了用户体验,避免...

Global site tag (gtag.js) - Google Analytics