Rumah >hujung hadapan web >tutorial js >javascript实现日期三级联动下拉框选择菜单实例代码

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

零下一度asal: 2017-04-19 18:02:552015semak imbas

这篇文章主要介绍了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(&#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>

Atas ialah kandungan terperinci javascript实现日期三级联动下拉框选择菜单实例代码. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：纯JS实现图片验证码功能(兼容IE6-8)代码Artikel seterusnya：用JavaScript实现验证码功能实例详解

Artikel berkaitan

Lihat lagi