年月日三級聯動代碼示例

1 	yymmdd.jsp
01 	<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
02 	 
03 	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
04 	<html>
05 	    <head>
06 	        <title>年月日三級聯動</title>
07 	         
08 	        <meta http-equiv="pragma" content="no-cache">
09 	        <meta http-equiv="cache-control" content="no-cache">
10 	        <meta http-equiv="expires" content="0">   
11 	        <!--
12 	        <link rel="stylesheet" type="text/css" href="styles.css">
13 	        -->
14 	    </head>
15 	      
16 	    <body>
17 	        <form id="form1" name="form1" action="">
18 	            <table>
19 	                <tr>
20 	                    <td class="input-item-name"><span class="input-required">出生日期</span></td>
21 	                    <td class="input-item-value">
22 	                        <select name="year" onchange="YYYYDD(this.value)"><option value="year">==請選擇 年==</option></select>
23 	                            
24 	                        <select name="month" onchange="MMDD(this.value)"><option value="MMvalue">==請選擇月==</option></select>
25 	                            
26 	                        <select name="day"><option value="day">==請選擇日 ==</option></select>
27 	                    </td>
28 	                </tr>
29 	                <script type="text/javascript" src="./yymmdd.js"></script>
30 	            </table>
31 	        </form>
32 	    </body>
33 	</html>
1 	yymmdd.js
view source print ?
01 	// begin yymmdd.js
02 	function YYYYMMDDstart() {
03 	    MonHead = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];//先給年下拉框賦內容
04 	    var y = new Date().getFullYear();
05 	    for (var i = y; i > (y - 100); i--) {
06 	        //以今年爲準,前100年
07 	        document.form1.year.options.add(new Option(" " + i + "年", i));//賦月份的下拉框
08 	    }
09 	    for (var i = 1; i < 13; i++) {
10 	        document.form1.month.options.add(new Option(" " + i + "月", i));
11 	    }
12 	    //document.form1.year.value = y;//初始化年
13 	    //document.form1.month.value = new Date().getMonth() + 1;//初始化月
14 	    var n = MonHead[new Date().getMonth()];
15 	    if (new Date().getMonth() == 1 && IsPinYear(yearvalue)) {
16 	        n++;
17 	    }
18 	    writeDay(n); //賦日期下拉框Author:meizz
19 	    //document.form1.day.value = new Date().getDate();//初始化日
20 	}
21 	if (document.attachEvent) {
22 	    window.attachEvent("onload", YYYYMMDDstart);
23 	} else {
24 	    window.addEventListener("load", YYYYMMDDstart, false);
25 	}
26 	//年發生變化時日期發生變化(主要是判斷閏平年)
27 	function YYYYDD(str) {
28 	    var MMvalue = document.form1.month.options[document.form1.month.selectedIndex].value;
29 	    if (MMvalue == "") {
30 	        var e = document.form1.day;
31 	        optionsClear(e);
32 	        return;
33 	    }
34 	    var n = MonHead[MMvalue - 1];
35 	    if (MMvalue == 2 && IsPinYear(str)) {
36 	        n++;
37 	    }
38 	    writeDay(n);
39 	}
40 	//月發生變化時日期聯動
41 	function MMDD(str) {
42 	    var yearvalue = document.form1.year.options[document.form1.year.selectedIndex].value;
43 	    if (yearvalue == "") {
44 	        var e = document.form1.day;
45 	        optionsClear(e);
46 	        return;
47 	    }
48 	    var n = MonHead[str - 1];
49 	    if (str == 2 && IsPinYear(yearvalue)) {
50 	        n++;
51 	    }
52 	    writeDay(n);
53 	}
54 	//據條件寫日期的下拉框
55 	function writeDay(n) {
56 	    var e = document.form1.day;
57 	    optionsClear(e);
58 	    for (var i = 1; i < (n + 1); i++) {
59 	        e.options.add(new Option(" " + i + "日", i));
60 	    }
61 	}
62 	//判斷是否閏平年
63 	function IsPinYear(year) {
64 	    return (0 == year % 4 && (year % 100 != 0 || year % 400 == 0));
65 	}
66 	function optionsClear(e) {
67 	    e.options.length = 1;
68 	}
69 	// end yymmdd.js
相關文章
相關標籤/搜索