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

 更新时间:2020年12月03日 14:58:41   作者:雨中的鱼  
这篇文章主要介绍了javascript实现日期三级联动下拉框选择菜单,实现JS年月日三级联动下拉框选择功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

由于工作中涉及到生日编辑资料编辑,年月日用上面网址案例:bug提示:

编辑生日栏的【年】或者【月】,之前保存的具体的【日】就不显示啦,产品说不管编辑哪个数据,其他数据不变;

然后自己改了一下代码:

<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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • javascript中的toFixed固定小数位数 简单实例分享

    javascript中的toFixed固定小数位数 简单实例分享

    这篇文章介绍了toFixed固定小数位数的简单例子,有需要的朋友可以参考一下
    2013-07-07
  • Js实现复选框的全选、全不选反选功能代码实例

    Js实现复选框的全选、全不选反选功能代码实例

    这篇文章主要介绍了Js实现复选框的全选、全不选和反选,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-02-02
  • KnockoutJS 3.X API 第四章之表单submit、enable、disable绑定

    KnockoutJS 3.X API 第四章之表单submit、enable、disable绑定

    Knockout是一个以数据模型(data model)为基础的能够帮助你创建富文本,响应显示和编辑用户界面的JavaScript类库。这篇文章介绍了KnockoutJS 3.X API 第四章之表单submit、enable、disable绑定的相关知识,感兴趣的朋友一起看看吧
    2016-10-10
  • js获取域名的方法

    js获取域名的方法

    这篇文章主要介绍了js获取域名的方法,涉及window.location中常见方法的使用技巧,需要的朋友可以参考下
    2015-01-01
  • nuxt+axios实现打包后动态修改请求地址的方法

    nuxt+axios实现打包后动态修改请求地址的方法

    这篇文章主要介绍了nuxt+axios实现打包后动态修改请求地址的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-04-04
  • JavaScript将XML转成JSON的方法

    JavaScript将XML转成JSON的方法

    这篇文章主要介绍了JavaScript将XML转成JSON的方法,实例分析了javascript操作XML文件及格式转化的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-03-03
  • JS实现点击按钮自动增加一个单元格的方法

    JS实现点击按钮自动增加一个单元格的方法

    这篇文章主要介绍了JS实现点击按钮自动增加一个单元格的方法,实例分析了javascript操作表格单元格的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-03-03
  • BootStrap与validator 使用笔记(JAVA SpringMVC实现)

    BootStrap与validator 使用笔记(JAVA SpringMVC实现)

    这篇文章主要介绍了BootStrap与validator 使用笔记(JAVA SpringMVC实现)的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2016-09-09
  • 详解js图片轮播效果实现原理

    详解js图片轮播效果实现原理

    这篇文章主要为大家详细介绍了js图片轮播效果实现原理,帮助大家更好地实现图片轮播效果,真正理解图片轮播原理,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2015-12-12
  • Chrome不支持showModalDialog模态对话框和无法返回returnValue问题的解决方法

    Chrome不支持showModalDialog模态对话框和无法返回returnValue问

    上个礼拜修改测试一个后台管理项目,在测试与各个浏览器兼容性的时候,发现在chrome浏览器下showModalDialog方法显示的并不是模态对话框,就像新打开一个页面一样,父窗口仍然可以随意获取焦点,并可以打开多个窗体,而且返回值returnValue也无法返回,一直是undefined
    2016-10-10

最新评论