JavaScript实现年月日三级联动

最新推荐文章于 2021-06-08 21:47:51 发布

happyPaste

最新推荐文章于 2021-06-08 21:47:51 发布

阅读量2.2k

点赞数 3

分类专栏： JavaScript 文章标签： javascript 年月日三级联动

本文链接：https://blog.csdn.net/happypaste/article/details/53946279

版权

JavaScript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

初学Javascript,，写了一个实现年月日三级联动的小程序，记录一下：

<html>
  <head>
  <title>年月日</title>
  </head>
  <body>
  请选择年份
    <select id="years" οnchange="showDate()">
      <option name="year" value="1900">1900</option>
    </select>年
  请选择月份
    <select id="months" οnchange="showDate()">
      <option name="month" value="1">1</option>
    </select>月
  请选择日期
    <select id="dates">
      <option>1</option>
    </select>日
  </body>

<script type="text/javascript">
	//onclick获得改变前的值。onchange获取改变后的值。
  var yearNode = document.getElementById("years"); 
  for (var year1=1901; year1<=2016; year1++) {
    var option1 = document.createElement("option");
    option1.innerHTML = year1;
    option1.setAttribute("value",year1);
    yearNode.appendChild(option1);
  }

  var monthNode = document.getElementById("months");
  for (var month1=2; month1<=12; month1++) {
    var option2 = document.createElement("option");
    option2.setAttribute("value",month1);
    option2.innerHTML = month1;
    monthNode.appendChild(option2);
 }

  function calculateDate(ddValue){
    var dateNode = document.getElementById("dates");
    dateNode.options.length = 1;
    for (var date1=2; date1<=ddValue; date1++) {
      var option3 = document.createElement("option");
      option3.setAttribute("value",date1);
      option3.innerHTML = date1;
      dateNode.appendChild(option3);
    }
  }
//当年份或者月份改变的时候，就运行showDate()
  function showDate(){
    var mon = parseInt(document.getElementById("months").value);
    var yea = parseInt(document.getElementById("years").value);
	
    switch (mon) {
    case 1:
    case 3:
    case 5:
    case 7:
    case 8:
    case 10:
    case 12:
      {
        calculateDate(31);					
      }
    break;

    case 4:
    case 6:
    case 9:
    case 11:
      {
        calculateDate(30);	
      }
    break;

    case 2:
      {
        if((0==yea%4 && 0!=yea%100) ||(0==yea%400))
        {
	       calculateDate(29);	
        }
        else
        {
	       calculateDate(28);	
        }
    }
  }				
}
</script>
</html>