`
guoxuepeng
  • 浏览: 38624 次
文章分类
社区版块
存档分类
最新评论

年月日三下拉框联动

 
阅读更多

年月日三下拉框联动(IE)


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
<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"><!--
function window.onload()
{
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 && (year0 !=0 || year%400 == 0))}
//--></script>
<p>查找更多代码,请访问:<a href="http://www.lanrentuku.com" target="_blank">懒人图库</a></p>
</body>
</html>
分享到:
评论

相关推荐

    一个年月日三下拉框联动实现JS代码

    一个年月日三下拉框联动实现JS代码 (this.value)"&gt; 请选择 年 (this.value)"&gt; 选择 月 选择 日 &lt;/form&gt;

    html年月日三下拉框联动

    ### HTML年月日三下拉框联动:深入解析与实现 在HTML网页设计中,创建交互式的用户界面是提升用户体验的关键。其中,日期选择器是一个常见的功能,尤其是当需要用户输入具体的日期时。本文将详细解析一个简单的HTML...

    JQuery 年月日三级下拉框联动

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

    JQuery年月日三级下拉框联动

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

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

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

    javascript经典年月日三级联动

    年月日三下拉框联动 &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; 选择 月 &lt;/option&gt; &lt;/select&gt; &lt;select name=DD&gt; ...

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

    "jQuery年月日三级联动(生日)插件"就是为了简化这一过程而设计的,它使得用户能更直观、高效地选择日期,提高了用户体验。这个插件通过将年、月、日分别作为三个下拉菜单,实现联动效果,即用户在选择一个年份后,...

    JS年月日三级联动下拉框

    在网页开发中,用户界面经常需要提供选择日期的控件,这时“年月日三级联动下拉框”就显得尤为重要。这种设计模式可以为用户提供一个直观且高效的日期选择方式,通常由三个下拉菜单组成,分别对应年、月、日,用户...

    jquery年月日三级联动

    "jQuery年月日三级联动"是一种常见的交互设计,它通过下拉框的形式,让用户依次选择年、月、日,形成一个完整的日期。这种设计使得日期输入更加直观且易于操作。接下来,我们将深入探讨这个主题。 首先,jQuery是一...

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

    在年月日的日期选择器中,"三级联动"意味着当用户在一级(年份)下拉框中选择一个年份后,二级(月份)的下拉框会自动更新为该年份的所有月份;同样,当用户在二级(月份)下拉框中选定一个月份后,三级(日期)的...

    年月日联动下拉_日期_下拉框_

    在网页设计和开发中,"年月日联动下拉_日期_下拉框_"是一个常见的交互功能,主要用于用户输入日期时提供便捷的选择方式。这个功能通常由三个独立的下拉框组成,分别用于选择年份、月份和日期,且这三个下拉框之间...

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

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

    下拉框年月日3级联动

    在提供的文件中,有两个资源:"jQuery年月日三级联动(生日)[无法初始化值]"和"js年月日三级联动下拉框选择日期插件"。这表明实现这一功能可能依赖于jQuery,一个广泛使用的JavaScript库,它简化了DOM操作和事件处理...

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

    在JavaScript(JS)编程中,实现年月日三级联动下拉框日期选择是一种常见的需求,尤其是在网页表单或交互式用户界面中。这种设计允许用户通过三个下拉菜单分别选择年、月和日,形成一个完整的日期。在这个"JS年月日...

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

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

    javaScript 实现的年月日三级联动

    在网页设计中,年、月、日三级联动通常指的是用户在选择日期时,选择年份会自动影响月份的选择,月份选择后又会影响日期的选择,这种功能常见于日期输入框。下面将详细介绍如何使用JavaScript实现这样的功能。 首先...

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

    jQuery年月日三级联动(生日) 插件正是为此目的设计的,它简化了用户在网页上输入生日或特定日期的过程,使得日期选择更为直观、便捷。 这个插件的核心功能在于,当用户在一个下拉框中选择年份后,月份的下拉框会...

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

    "JS年月日三级联动下拉框日期选择特效代码" 提供了一种实现方式,它通过JavaScript(JS)来创建一个包含年、月、日的三级下拉菜单,用户可以逐级选择,形成一个完整的日期。这种设计既简洁又直观,特别适用于那些...

Global site tag (gtag.js) - Google Analytics