JS 實現的年月日三級聯動
阿新 • • 發佈：2019-01-09
js檔案
SYT="-請選擇年份-"; SMT="-請選擇月份-"; SDT="-請選擇日期-"; BYN=50;//年份範圍往前50年 AYN=5;//年份範圍往後0年 function YMDselect(){ this.SelY=document.getElementsByName(arguments[0])[0]; this.SelM=document.getElementsByName(arguments[1])[0]; this.SelD=document.getElementsByName(arguments[2])[0]; this.DefY=this.SelD?arguments[3]:arguments[2]; this.DefM=this.SelD?arguments[4]:arguments[3]; this.DefD=this.SelD?arguments[5]:arguments[4]; this.SelY.YMD=this; this.SelM.YMD=this; this.SelY.onchange=function(){YMDselect.SetM(this.YMD)}; if(this.SelD)this.SelM.onchange=function(){YMDselect.SetD(this.YMD)}; YMDselect.SetY(this) }; //設定年份 YMDselect.SetY=function(YMD){ dDate = new Date(); dCurYear = dDate.getFullYear(); YMD.SelY.options.add(new Option(SYT,'0')); for(i = dCurYear+AYN; i>(dCurYear-BYN); i--){ YMDYT=i+'年'; YMDYV=i; OptY = new Option(YMDYT,YMDYV); YMD.SelY.options.add(OptY); if(YMD.DefY==YMDYV) OptY.selected=true } YMDselect.SetM(YMD) }; //設定月份 YMDselect.SetM=function(YMD){ YMD.SelM.length = 0; YMD.SelM.options.add(new Option(SMT,'0')); if(YMD.SelY.value>0){ for(var i=1;i<=12;i++){ YMDMT=i+'月'; YMDMV=i; OptM=new Option(YMDMT,YMDMV); YMD.SelM.options.add(OptM); if(YMD.DefM==YMDMV) OptM.selected=true } } if(YMD.SelD)YMDselect.SetD(YMD) }; //設定日期 YMDselect.SetD=function(YMD){ YI=YMD.SelY.value; MI=YMD.SelM.value; YMD.SelD.length = 0; YMD.SelD.options.add(new Option(SDT,'0')); if(YI>0 && MI>0){ dPrevDate = new Date(YI, MI, 0); daysInMonth=dPrevDate.getDate(); for (d = 1; d <= parseInt(daysInMonth); d++) { YMDDT=d+'日'; YMDDV=d; OptD=new Option(YMDDT,YMDDV); YMD.SelD.options.add(OptD); if(YMD.DefD==YMDDV)OptD.selected=true } } }
html檔案
<!doctype html> <html> <head> <meta charset="utf-8"> <title>js年月日三級聯動</title> <script src ="js\YYYYMMDDClass.js"></script> </head> <body > <form action="" style="" method="get"> <span>Birthday: </span> <select name="year"></select> <select name="month"></select> <select name="day"></select> <br> <button type="submit" value="submit">submit</button> <script> /** * 年月聯動 * new YMDselect('year','month'); * new YMDselect('year','month',2010);//預設2010 *new YMDselect('year','month',2010,2);//2010 2 * */ /** * 年月日聯動 * new YMDselect('year','month','day1'); *new YMDselect('year','month','day1',2020);預設20020年 * new YMDselect('year','month','day1',2020,6);預設20020年6月 * new YMDselect('year','month','day',2020,6,22); 預設20020年6月22日 * */ new YMDselect('year','month','day'); </script> </form> </body> </html>
JavaScript 用法
1.js檔案外聯
<head>
<script src ="js\YYYYMMDDClass.js"></script>
</head>2.直接用
<head>
<script>
alert("我的第一個 JavaScript");
</script>
</head>3.在body中用
<!DOCTYPE html> <html> <body> . . <script> document.write("<h1>這是一個標題</h1>"); document.write("<p>這是一個段落</p>"); </script> . . </body> </html>
更多用法請訪問W3CSchool