Code666 (代码贴、代码片段)

[JavaScript] JavaScript三级年月日下拉菜单代码 →→→→→进入此内容的聊天室

来自 , 2021-01-29, 写在 JavaScript, 查看 107 次.
URL http://www.code666.cn/view/30de2428
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <meta http-equiv="Content-Type" content="text/html;" />
  6. <meta name="keywords" content="年月日三级下拉列表js" />
  7. <title>年月日三级下拉列表</title>
  8. <script type="text/javascript">
  9. function initDate(year,month,day)
  10. 　　    {
  11. <!--
  12.             //每个月的初始天数
  13. 　　        MonDays = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
  14. 　　        //当前的年份
  15. 　　        var y = new Date().getFullYear();
  16. 　　        //当前的月份
  17. 　　        var m = new Date().getMonth()+1; //javascript月份为0-11
  18. 　　        //但前的天份
  19. 　　        var d = new Date().getDate();　    
  20.             //以今年为准，向后50年，填充年份下拉框
  21. 　　        for (var i = y; i >(y-50); i--)
  22.             {
  23. 　　            year.options.add(new Option(i,i));
  24.             }
  25.             //选中今年
  26.             year.value=y;
  27.  
  28. 　　        //填充月份下拉框
  29. 　　        for (var i = 1; i <= 12; i++)
  30.             {
  31.                 month.options.add(new Option(i,i));
  32.             }
  33.             //选中当月
  34.             month.value = m    
  35.             //获得当月的初始化天数
  36.             var n = MonDays[m-1];
  37.             //如果为2月，天数加1
  38.             if (m == 2 && isLeapYear(year.options[year.selectedIndex].value))
  39.                   n++;
  40.             //填充日期下拉框
  41.             createDay(n,day);
  42.             //选中当日
  43.             day.value = new Date().getDate();
  44. 　　    }
  45. function change(year,month,day) //年月变化，改变日                                  当鼠标点击select时触发onclick事件从而调用此函数，
  46. 　　    {
  47. 　　         var y = year.options[year.selectedIndex].value;                      //由于传递参数的是调用的this指针，
  48.     　　     var m = month.options[month.selectedIndex].value;
  49.     　　     //if (m == "" ){  clearOptions(day); return;}
  50.     　　     var n = MonDays[m - 1];
  51.     　　     if ( m ==2 && isLeapYear(y))
  52.     　　     {
  53.     　　         n++;
  54.     　　     }
  55.     　　     createDay(n,day)
  56. 　　    }
  57. function createDay(n,day) //填充日期下拉框
  58. 　　    {
  59. 　　        //清空下拉框
  60.     　　     clearOptions(day);
  61.     　　     //几天，就写入几项
  62.     　　     for(var i=1; i<=n; i++)
  63.     　　     {
  64.     　　        day.options.add(new Option(i,i));
  65.     　　     }
  66. 　　    }
  67. function clearOptions(ctl)//删除下拉框中的所有选项
  68. 　　    {
  69.             for(var i=ctl.options.length-1; i>=0; i--)
  70.             {
  71. 　　            ctl.remove(i);
  72. 　　        }
  73. 　　    }　
  74. function isLeapYear(year)//判断是否闰年
  75. 　　    {
  76. 　　        return( year%4==0 || (year0 ==0 && year%400 == 0));
  77. 　　    }
  78. function onload()
  79. {
  80. initDate(document.form1.select_year,document.form1.select_month,document.form1.select_day);//初始化出生日期下拉菜单内容
  81. }
  82. //-->
  83. </script>
  84. </head>
  85. <body onload="onload()" style="text-align:center">
  86. <h2>年月日三级下拉列表js实例</h2>
  87. <form name="form1">
  88. <select name="select_year" onchange="change(this, document.form1.select_month, document.form1.select_day)"></select>年
  89. <select name="select_month" onchange="change(document.form1.select_year, this,document.form1.select_day)"></select>月
  90. <select name="select_day"></select>日
  91. </form>
  92. </body>
  93. </html>
  94. //javascript/7008

回复 "JavaScript三级年月日下拉菜单代码"

这儿你可以回复上面这条便签

captcha

贴代码片段 - Code666