年月日三级联动代码示例

yymmdd.jsp
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<title>年月日三级联动</title>
		
		<meta http-equiv="pragma" content="no-cache">
		<meta http-equiv="cache-control" content="no-cache">
		<meta http-equiv="expires" content="0">    
		<!--
		<link rel="stylesheet" type="text/css" href="styles.css">
		-->
	</head>
	 
	<body>
		<form id="form1" name="form1" action="">
			<table>
				<tr>
					<td class="input-item-name"><span class="input-required">出生日期</span></td>
					<td class="input-item-value">
						<select name="year" onchange="YYYYDD(this.value)"><option value="year">==请选择 年==</option></select>
						   
						<select name="month" onchange="MMDD(this.value)"><option value="MMvalue">==请选择月==</option></select>
						   
						<select name="day"><option value="day">==请选择日 ==</option></select>
					</td>
				</tr>
				<script type="text/javascript" src="./yymmdd.js"></script>
			</table>
		</form>
	</body>
</html>

yymmdd.js
// begin yymmdd.js
function YYYYMMDDstart() {
	MonHead = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];//先给年下拉框赋内容
	var y = new Date().getFullYear();
	for (var i = y; i > (y - 100); i--) {
		//以今年为准,前100年
		document.form1.year.options.add(new Option(" " + i + "年", i));//赋月份的下拉框
	}
	for (var i = 1; i < 13; i++) {
		document.form1.month.options.add(new Option(" " + i + "月", i));
	}
	//document.form1.year.value = y;//初始化年
	//document.form1.month.value = new Date().getMonth() + 1;//初始化月
	var n = MonHead[new Date().getMonth()];
	if (new Date().getMonth() == 1 && IsPinYear(yearvalue)) {
		n++;
	}
	writeDay(n); //赋日期下拉框Author:meizz
	//document.form1.day.value = new Date().getDate();//初始化日
}
if (document.attachEvent) {
	window.attachEvent("onload", YYYYMMDDstart);
} else {
	window.addEventListener("load", YYYYMMDDstart, false);
}
//年发生变化时日期发生变化(主要是判断闰平年)
function YYYYDD(str) {
	var MMvalue = document.form1.month.options[document.form1.month.selectedIndex].value;
	if (MMvalue == "") {
		var e = document.form1.day;
		optionsClear(e);
		return;
	}
	var n = MonHead[MMvalue - 1];
	if (MMvalue == 2 && IsPinYear(str)) {
		n++;
	}
	writeDay(n);
}
//月发生变化时日期联动
function MMDD(str) {
	var yearvalue = document.form1.year.options[document.form1.year.selectedIndex].value;
	if (yearvalue == "") {
		var e = document.form1.day;
		optionsClear(e);
		return;
	}
	var n = MonHead[str - 1];
	if (str == 2 && IsPinYear(yearvalue)) {
		n++;
	}
	writeDay(n);
}
//据条件写日期的下拉框
function writeDay(n) {
	var e = document.form1.day;
	optionsClear(e);
	for (var i = 1; i < (n + 1); i++) {
		e.options.add(new Option(" " + i + "日", i));
	}
}
//判断是否闰平年
function IsPinYear(year) {
	return (0 == year % 4 && (year % 100 != 0 || year % 400 == 0));
}
function optionsClear(e) {
	e.options.length = 1;
}
// end yymmdd.js

你可能感兴趣的:(js,三级联动,年月日)