javascript实现日期三级联动下拉框选择菜单的方法-创新互联

这篇文章主要介绍了javascript实现日期三级联动下拉框选择菜单的方法，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。

成都创新互联公司专注为客户提供全方位的互联网综合服务，包含不限于网站设计、做网站、平湖网络推广、小程序制作、平湖网络营销、平湖企业策划、平湖品牌公关、搜索引擎seo、人物专访、企业宣传片、企业代运营等，从售前售中售后，我们都将竭诚为您服务，您的肯定，是我们大的嘉奖；成都创新互联公司为所有大学生创业者提供平湖建站搭建服务，24小时服务热线：028-86922220，官方网址：www.cdcxhl.com

JavaScript是什么

JavaScript是一种直译式的脚本语言，其解释器被称为JavaScript引擎，是浏览器的一部分，JavaScript是被广泛用于客户端的脚本语言，最早是在HTML网页上使用，用来给HTML网页增加动态功能。

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

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

然后自己改了一下代码：

  
  
  





  
    请选择 年
  
  
    选择 月
  
  
    选择 日
  



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

感谢你能够认真阅读完这篇文章，希望小编分享的“javascript实现日期三级联动下拉框选择菜单的方法”这篇文章对大家有帮助，同时也希望大家多多支持创新互联建站，关注创新互联网站建设公司行业资讯频道，更多相关知识等着你来学习!

另外有需要云服务器可以了解下创新互联建站www.cdcxhl.com，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

本文名称：javascript实现日期三级联动下拉框选择菜单的方法-创新互联
标题来源：http://cqcxhl.com/article/degiho.html