js实现年月日三级下拉菜单联动

版权声明：本文为博主原创文章，未经博主允许不得转载。

一：图片预览：

二：js代码如下：

 

[html] view plain copy
 
 print?
  1. <html>  
  2. <head>  
  3. <title>年月日三下拉框联动</title>  
  4. <meta http-equiv='Content-Type' content='text/html; charset=gb2312'>  
  5. </head>  
  6.   
  7. <body>  
  8. <form name=form1>  
  9. <select name=YYYY onchange="YYYYMM(this.value)">  
  10. <option value="">年</option>  
  11. </select>  
  12. <select name=MM onchange="MMDD(this.value)">  
  13. <option value="">月</option>  
  14. </select>  
  15. <select name=DD>  
  16. <option value="">日</option>  
  17. </select>  
  18. </form>  
  19.   
  20. <script language="JavaScript">  
  21. window.onload = function(){  
  22. strYYYY = document.form1.YYYY.outerHTML;  
  23. strMM = document.form1.MM.outerHTML;  
  24. strDD = document.form1.DD.outerHTML;  
  25. MonHead = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];  
  26.   
  27. //先给年下拉框赋内容  
  28. var y = new Date().getFullYear();  
  29. var str = strYYYY.substring(0, strYYYY.length - 9);  
  30. for (var i = (y-30); i < (y+30); i++) //以今年为准，前30年，后30年  
  31. {  
  32. str += "<option value='" + i + "'> " + i + "</option>\r\n";  
  33. }  
  34. document.form1.YYYY.outerHTML = str +"</select>";  
  35.   
  36. //赋月份的下拉框  
  37. var str = strMM.substring(0, strMM.length - 9);  
  38. for (var i = 1; i < 13; i++)  
  39. {  
  40. str += "<option value='" + i + "'> " + i + "</option>\r\n";  
  41. }  
  42. document.form1.MM.outerHTML = str +"</select>";  
  43.   
  44. document.form1.YYYY.value = y;  
  45. document.form1.MM.value = new Date().getMonth() + 1;  
  46. var n = MonHead[new Date().getMonth()];  
  47. if (new Date().getMonth() ==1 && IsPinYear(YYYYvalue)) n++;  
  48. writeDay(n); //赋日期下拉框  
  49. document.form1.DD.value = new Date().getDate();  
  50. }  
  51. function YYYYMM(str) //年发生变化时日期发生变化(主要是判断闰平年)  
  52. {  
  53. var MMvalue = document.form1.MM.options[document.form1.MM.selectedIndex].value;  
  54. if (MMvalue == ""){DD.outerHTML = strDD; return;}  
  55. var n = MonHead[MMvalue - 1];  
  56. if (MMvalue ==2 && IsPinYear(str)) n++;  
  57. writeDay(n)  
  58. }  
  59. function MMDD(str) //月发生变化时日期联动  
  60. {  
  61. var YYYYvalue = document.form1.YYYY.options[document.form1.YYYY.selectedIndex].value;  
  62. if (str == ""){DD.outerHTML = strDD; return;}  
  63. var n = MonHead[str - 1];  
  64. if (str ==2 && IsPinYear(YYYYvalue)) n++;  
  65. writeDay(n)  
  66. }  
  67. function writeDay(n) //据条件写日期的下拉框  
  68. {  
  69. var s = strDD.substring(0, strDD.length - 9);  
  70. for (var i=1; i<(n+1); i++)  
  71. s += "<option value='" + i + "'> " + i + "</option>\r\n";  
  72. document.form1.DD.outerHTML = s +"</select>";  
  73. }  
  74. function IsPinYear(year)//判断是否闰平年  
  75. { return(0 == year%4 && (year%100 !=0 || year%400 == 0))}  
  76. //--></script>  
  77. </body>  
  78. </html>  


 

 

 

posted @ 2017-04-06 16:29  Ajax在路上  阅读(680)  评论(0)  编辑  收藏  举报