javascript实现日期3级联动下拉框选择菜单

作者:雨中的鱼 时间:2023-10-19 02:15:34 

由于工作中涉及到生日编辑资料编辑,然后自己改了一下代码:


<html>
<head>
<meta charset="UTF-8"/>
<meta name="viewport"
  content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
<title>JS年月日 * 联动下拉框日期选择代码</title>
</head>
<body>
<form name="reg_testdate">
<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" onChange="DDD(this.value)">
 <option value="">选择 日</option>
</select>
</form>
<script language="JavaScript">
var changeDD = 1;//->一个全局变量
function YYYYMMDDstart() {
 MonHead = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
 //先给年下拉框赋内容
 var y = new Date().getFullYear();
 for (var i = (y - 47); i < (y + 21); i++) //以今年为准,前30年,后30年
  document.reg_testdate.YYYY.options.add(new Option(" " + i + " 年", i));
 //赋月份的下拉框
 for (var i = 1; i < 13; i++)
  document.reg_testdate.MM.options.add(new Option(" " + i + " 月", i));
 document.reg_testdate.YYYY.value = y;
 document.reg_testdate.MM.value = new Date().getMonth() + 1;
 var n = MonHead[new Date().getMonth()];
 if (new Date().getMonth() == 1 && IsPinYear(YYYYvalue)) n++;
 writeDay(n); //赋日期下拉框
 //->赋值给日,为当天日期
//  document.reg_testdate.DD.value = new Date().getDate();
}
if (document.attachEvent)
 window.attachEvent("onload", YYYYMMDDstart);
else
 window.addEventListener('load', YYYYMMDDstart, false);
function YYYYDD(str) //年发生变化时日期发生变化(主要是判断闰平年)
{
 var MMvalue = document.reg_testdate.MM.options[document.reg_testdate.MM.selectedIndex].value;
 if (MMvalue == "") {
//   var e = document.reg_testdate.DD;
  optionsClear(e);
  return;
 }
 var n = MonHead[MMvalue - 1];
 if (MMvalue == 2 && IsPinYear(str)) n++;
 writeDay(n)
}
function MMDD(str) //月发生变化时日期联动
{
 var YYYYvalue = document.reg_testdate.YYYY.options[document.reg_testdate.YYYY.selectedIndex].value;
 if (YYYYvalue == "") {
  var e = document.reg_testdate.DD;
  optionsClear(e);
  return;
 }
 var n = MonHead[str - 1];
 if (str == 2 && IsPinYear(YYYYvalue)) n++;
 writeDay(n)
}
function writeDay(n) //据条件写日期的下拉框
{
 var e = document.reg_testdate.DD;
 optionsClear(e);
 for (var i = 1; i < (n + 1); i++)
 {
  e.options.add(new Option(" " + i + " 日", i));
  if(i == changeDD){
   e.options[i].selected = true; //->保持选中状态
  }
 }
 console.log(i);
 console.log(changeDD);
}
function IsPinYear(year) //判断是否闰平年
{
 return (0 == year % 4 && (year % 100 != 0 || year % 400 == 0));
}
function optionsClear(e) {
 e.options.length = 1;
}
//->随时监听日的改变
function DDD(str){
 changeDD = str;
}
</script>
</body>
</html>
标签:js,日期,下拉框
0
投稿

猜你喜欢

  • php 保留小数点

    2023-06-21 10:47:04
  • Asp定时执行操作 Asp定时读取数据库(网页定时操作详解)

    2011-03-17 11:04:00
  • asp如何读取服务器上的驱动器?

    2009-11-18 20:50:00
  • 松子学ASP—Server篇

    2008-04-22 14:14:00
  • SQLServer 镜像功能完全实现

    2011-09-30 11:33:07
  • css学习笔记: css新闻列表的特殊做法

    2009-07-19 14:25:00
  • 多种网页弹出窗口代码

    2007-11-24 21:13:00
  • conn.execute(sql)后面加(0)和不加的区别

    2009-06-24 11:13:00
  • oracle 服务启动,关闭脚本(windows系统下)

    2009-07-26 08:57:00
  • ORACLE 正则解决初使化数据格式不一致

    2009-05-24 19:44:00
  • 利用hasOwnProperty给数组去重的面试题分享

    2023-08-06 20:48:37
  • 用CSS制作兼容多浏览量器的隐藏菜单

    2007-08-30 09:05:00
  • MySQL Group By用法

    2012-01-05 19:05:14
  • MySQL安全问题的一点心得

    2009-01-07 16:13:00
  • 在FLASH中调用ASP的方法

    2009-03-09 18:32:00
  • FCKeditor新版本发布,并更名为CKeditor

    2009-09-08 13:09:00
  • python 调试器pdb的简单使用

    2023-08-03 19:13:20
  • 浅谈PHP的反射机制

    2023-06-13 17:05:35
  • 怎么检测到点击图片的左右位置 像QQ空间那样

    2008-10-04 10:45:00
  • GO语言的IO方法实例小结

    2023-09-17 08:47:24
  • asp之家 网络编程 m.aspxhome.com