javascript實(shí)現(xiàn)日期三級(jí)聯(lián)動(dòng)下拉框選擇菜單的方法

發(fā)布時(shí)間：2021-04-25 09:44:57 來(lái)源：億速云閱讀：194 作者：小新欄目：web開(kāi)發(fā)

這篇文章主要介紹了javascript實(shí)現(xiàn)日期三級(jí)聯(lián)動(dòng)下拉框選擇菜單的方法，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

JavaScript是什么

JavaScript是一種直譯式的腳本語(yǔ)言，其解釋器被稱為JavaScript引擎，是瀏覽器的一部分，JavaScript是被廣泛用于客戶端的腳本語(yǔ)言，最早是在HTML網(wǎng)頁(yè)上使用，用來(lái)給HTML網(wǎng)頁(yè)增加動(dòng)態(tài)功能。

由于工作中涉及到生日編輯資料編輯，年月日用上面網(wǎng)址案例：bug提示：

編輯生日欄的【年】或者【月】，之前保存的具體的【日】就不顯示啦，產(chǎn)品說(shuō)不管編輯哪個(gè)數(shù)據(jù)，其他數(shù)據(jù)不變；

然后自己改了一下代碼：

<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年月日三級(jí)聯(lián)動(dòng)下拉框日期選擇代碼</title>
</head>

<body>

<form name="reg_testdate">
  <select name="YYYY" onChange="YYYYDD(this.value)">
    <option value="">請(qǐng)選擇 年</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;//->一個(gè)全局變量
  function YYYYMMDDstart() {
    MonHead = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
    //先給年下拉框賦內(nèi)容
    var y = new Date().getFullYear();
    for (var i = (y - 47); i < (y + 21); i++) //以今年為準(zhǔn)，前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); //賦日期下拉框
    //->賦值給日，為當(dāng)天日期
//    document.reg_testdate.DD.value = new Date().getDate();
  }
  if (document.attachEvent)
    window.attachEvent("onload", YYYYMMDDstart);
  else
    window.addEventListener('load', YYYYMMDDstart, false);

  function YYYYDD(str) //年發(fā)生變化時(shí)日期發(fā)生變化(主要是判斷閏平年)
  {
    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) //月發(fā)生變化時(shí)日期聯(lián)動(dòng)
  {
    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) //據(jù)條件寫(xiě)日期的下拉框
  {
    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; //->保持選中狀態(tài)
      }
    }
    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;
  }
  //->隨時(shí)監(jiān)聽(tīng)日的改變
  function DDD(str){
    changeDD = str;
  }
</script>
</body>

</html>

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“javascript實(shí)現(xiàn)日期三級(jí)聯(lián)動(dòng)下拉框選擇菜單的方法”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!

向AI問(wèn)一下細(xì)節(jié)

javascript實(shí)現(xiàn)日期三級(jí)聯(lián)動(dòng)下拉框選擇菜單的方法

JavaScript是什么

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽