javascript级联选择日期(最常用的网站选择日期样式)

来源：互联网发布：知乎日报app源代码编辑：程序博客网时间：2024/06/09 21:38

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=GB18030">
        <title>Insert title here</title>
  <script type="text/javascript">
   /*
    * javascript级联选择日期(最常用的网站选择日期样式)
    * 设计和操做过程可能出现的问题:
    *    1 根据年份和月份才会生成日期的下拉列表
    *    2 每次点击年份和月份下拉列表,日期会重复添加,所以要清空当前的日期列表
    *    3 body中的select和option标签,如果没有放在一行,清空日期的列表时,会把-请选择年份-
    *    这个列表清空掉,所以要使用 dateSelect.options,只获取option标签
    */
   onload = function(){
    //获取年月份3个对象
    var yearSelect = document.getElementById("yearSelect");
    var monthSelect = document.getElementById("monthSelect");
    var dateSelect = document.getElementById("dateSelect");

    //生成年份和月份下拉列表
    genarateYear();
    genarateMonth();
    //generateDate();
    //alert(genarateMonth());

    //当年份和月份下拉列表被点击时,生成日期
    yearSelect.onchange = generateDate;
    monthSelect.onchange = generateDate;

    function generateDate(){

     //获取dateSelecte中的所有option,循环遍历,删除(解决日期重复的问题)
     //var optionArr = dateSelect.childNodes;
     var optionArr = dateSelect.options;
     for(var i = 1; i < optionArr.length; i++){
      dateSelect.removeChild(optionArr[i--]);
     }

     //dateSelect.options.length = 1; //也能解决日期重复的问题
     var year = yearSelect.value;
     //alert(year);

     // 获取当前选中的年份和月份
     var month = monthSelect.value;
     if(year == "" || month == "")
      return;

     // 计算当前年当前月有多少天
     var days = 0;
     if(month == 1 || month == 3 || month == 5 || month == 7 || month == 8 || month == 10 || month == 12)
      days = 31;
     else if (month == 2)
      days = (year % 4 == 0 && year % 100 != 0 ) || (year % 400 == 0) ? 29 : 28;
        else
      days = 30;

     // 创建option, 添加到dateSelect
        for(var i = 1; i <= days; i++){
      var option = document.createElement("option");
      option.value = i;
      option.innerHTML = i;
      dateSelect.appendChild(option);
     }
    }

    //生成和显示年份的下拉列表
    function genarateYear(){
     var currentYear = new Date().getFullYear();
     for(var i = currentYear; i > currentYear - 150; i--){
      var option = document.createElement("option");
      option.value = i;
      option.innerHTML = i;
      yearSelect.appendChild(option);
     }

    }

    //生成和显示月的你的下拉列表
    function genarateMonth(){
     for(var i = 1; i <= 12; i++){
      var option = document.createElement("option");
      option.value = i;
      option.innerHTML = i;
      monthSelect.appendChild(option);
     }
    }

   }
  </script>
    </head>
    <body>
    <select id="yearSelect">
      <option value="">-请选择年份-</option>
  </select>
    <select id="monthSelect">
      <option value="">-请选择月份-</option>
  </select>
    <select id="dateSelect">
      <option value="">-请选择日期-</option>
  </select>
    </body>
</html>