JS 年月日三下拉框联动

最新推荐文章于 2018-05-17 11:04:00 发布
最新推荐文章于 2018-05-17 11:04:00 发布
阅读量1.3k 收藏
点赞数
分类专栏： JS 文章标签： date javascript function ie
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiangsuixinsheng/article/details/6721553
版权
 

<html>
<head>
<title>年月日三下拉框联动</title>
<meta http-equiv='Content-Type' content='text/html; charset=gb2312'>
</head>

<body>
<form name=form1>
<select name=YYYY onChange="YYYYDD(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 YYYYMMDDstart()
{
 //定义一个12个月对应最后一天的号数数组
 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();
}

//监听IE事件
if(document.attachEvent)
 window.attachEvent("onload", YYYYMMDDstart);
else //FF监听事件
 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;}
//alert("MMvalue="+MMvalue);
var n = MonHead[MMvalue - 1];
if (MMvalue ==2 && IsPinYear(str)) n++;
//alert(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;}
 //alert("str="+str+"YYYYvalue="+YYYYvalue);
 var n = MonHead[str - 1];
 //是闰年就在n=28的基础上加1
 if (str ==2 && IsPinYear(YYYYvalue)) n++;
 //alert(n);
 writeDay(n)
}

/**
*据条件写日期的下拉框
**/
function writeDay(n)
{
 alert("n="+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 && (year%100 !=0 || year%400 == 0));}

function optionsClear(e)
{
e.options.length = 1;
}
//--></script>
</body>
</html>

 

相随心声
关注
专栏目录
年月日下拉框
04-04
非常实用的一个插件!非常实用的一个插件!非常实用的一个插件!非常实用的一个插件!
年月日三下拉框联动
03-16
标题“年月日三下拉框联动”涉及的是在网页前端开发中常见的一种交互设计，通常用于日期选择功能。这种设计允许用户通过三个独立的下拉框分别选择年、月和日，形成一个完整的日期输入。这样的方式既方便用户操作，也...
年月日三联动下拉框
远方星空
05-06 3129
HTML>    HEAD>        title>年月日三联动下拉框title>        meta http-equiv=Content-Type content=text/html; charset=gb2312>        meta name=author content=http://singlepine.cnblogs.com/>    HEAD>   
年月日三级级联
weixin_30423977的博客
10-07 111
<html><head><title>年月日三下拉框联动</title><metahttp-equiv='Content-Type'content='text/html;charset=gb2312'><metaname='author'content='GBK(tzol)//www.baidu.com'></...
年月日三下拉框联动 JS
weixin_30314631的博客
05-29 96
1 <html> 2 　　<head> 3 　　<title>年月日三下拉框联动 - www.aspxhome.com</title> 4 　　<meta http-equiv='Content-Type' content='text/html; charset=gb2312'> 5 　　<meta name=...
JS年月日三级联动下拉框日期选择特效代码
03-20
"JS年月日三级联动下拉框日期选择特效代码" 提供了一种实现方式，它通过JavaScript（JS）来创建一个包含年、月、日的三级下拉菜单，用户可以逐级选择，形成一个完整的日期。这种设计既简洁又直观，特别适用于那些...
html年月日三下拉框联动
04-10
通过以上分析，我们不仅理解了HTML年月日三下拉框联动的基本原理，还学习了如何使用JavaScript进行事件处理、操作DOM元素以及处理日期相关的逻辑。这种技术在构建用户友好的网页表单和日期选择器时非常有用。掌握...
一个年月日三下拉框联动实现JS代码
05-20
一个年月日三下拉框联动实现JS代码 (this.value)"> 请选择 年 (this.value)"> 选择 月 选择 日 </form>
JQuery年月日三级下拉框联动
10-24
"JQuery年月日三级下拉框联动"就是一个解决此类需求的方案，它利用JavaScript库JQuery的便利性和高效性，实现了用户在选择年份后，月份和日期下拉框自动更新的交互效果。这种方式可以提高用户体验，减少用户手动操作...
下拉框选择年月日代码
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>
js下拉框选择年月日代码
09-26
js下拉框选择年月日代码
日期下拉列表，年月日分开的！！
01-04
日期下拉列表，年月日分开的！！简单来说就是两个数字之间的下拉列表
javascript年月日三级联动下拉框
Violet_Ice紫冰的CSDN博客
08-14 2165
看了好几篇 js 年月日三级联动下拉框，没看到一个好的，不是太繁琐，就是太猥琐。还有就是闲得慌。有这样的：function (){ return Array( [1...28], [1...30], [1...31] ) }简直了，这是要有多闲。 还有的写的很复杂，这很简单的东西，搞得那么复杂给谁看。我看半天愣是没看懂。
日期年月日三个下拉框
01-18 798
首先在form中用隐藏域定义，如：在脚本中：//保存function  save(){ var year = document.myFrom.year.value; var month = document.myFrom.month.value; var day = document.myFrom.day.value; document.myFrom.birthday.value=
月份-日期下拉框联动变换日期
weixin_34185364的博客
05-17 430
月份与日期在页面中为两个下拉框，分别为枚举类型，现通过选择月份时变换日期天数，比如，4月30天，3月31天，2月29天 js 如下 function populateDays(index) { var monthDays = new Array(31, 29, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31); var...
年月日三联动下拉框(无刷新)
luyesql的专栏
10-10 1844
WebForm2 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 document.form1.YYYY.options.add(
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值