Home > Article > Web Front-end > Javascript implements date three-level linkage drop-down box selection menu example code

Javascript implements date three-level linkage drop-down box selection menu example code

零下一度Original: 2017-04-19 18:02:551964browse

This article mainly introduces the JavaScript implementation of the date three-level linkage drop-down box selection menu and the JS year, month, day three-level linkage drop-down box selection function. It has certain reference value. Interested friends can refer to it

Since the work involves editing birthday editing data, the year, month and day use the above URL case: bug tip:

Edit the [Year] or [Month] of the birthday column, and the specific [Day] saved before ] It will not be displayed. The product says that no matter which data is edited, other data will remain unchanged;

Then I changed the code myself:

<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(&#39;load&#39;, 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>

The above is the detailed content of Javascript implements date three-level linkage drop-down box selection menu example code. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Pure JS code to implement image verification code function (compatible with IE6-8)Next article：Pure JS code to implement image verification code function (compatible with IE6-8)

See more

Javascript implements date three-level linkage drop-down box selection menu example code

Related articles