suchen

Heim  >  Artikel  >  Web-Frontend  >  Javascript implementiert einen Beispielcode für ein Dropdown-Menü mit Datumsverknüpfung auf drei Ebenen

Javascript implementiert einen Beispielcode für ein Dropdown-Menü mit Datumsverknüpfung auf drei Ebenen

零下一度
零下一度Original
2017-04-19 18:02:551977Durchsuche

Dieser Artikel stellt hauptsächlich die JavaScript-Implementierung des Dropdown-Feldauswahlmenüs für die dreistufige Verknüpfung von Datum und Tag vor. Es hat einen bestimmten Referenzwert kann darauf verweisen

Da meine Arbeit das Bearbeiten von Geburtstagsdaten umfasst, verwenden Sie die obige URL für Jahr, Monat und Tag: Fehlertipp:

Bearbeiten Sie das [Jahr] oder den [Monat] des Geburtstages Spalte und der spezifische [Tag], der zuvor gespeichert wurde, werden nicht angezeigt. Das Produkt sagte, dass die anderen Daten unverändert bleiben, egal welche Daten bearbeitet werden.

Dann habe ich den Code selbst geändert: 


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

Das obige ist der detaillierte Inhalt vonJavascript implementiert einen Beispielcode für ein Dropdown-Menü mit Datumsverknüpfung auf drei Ebenen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Reiner JS-Code zur Implementierung der Bildverifizierungscodefunktion (kompatibel mit IE6-8)Nächster Artikel：Reiner JS-Code zur Implementierung der Bildverifizierungscodefunktion (kompatibel mit IE6-8)

In Verbindung stehende Artikel

Mehr sehen