<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB18030">
<title>Insert title here</title>
<script type="text/javascript">
/*
* javascript級聯選擇日期(最常用的網站選擇日期樣式)
* 設計和操做過程可能出現的問題:
* 1 根據年份和月份才會生成日期的下拉列表
* 2 每次點擊年份和月份下拉列表,日期會重復添加,所以要清空當前的日期列表
* 3 body中的select和option標簽,如果沒有放在一行,清空日期的列表時,會把-請選擇年份-
* 這個列表清空掉,所以要使用 dateSelect.options,隻獲取option標簽
*/
onload = function(){
//獲取年月份3個對象
var yearSelect = document.getElementById("yearSelect");
var monthSelect = document.getElementById("monthSelect");
var dateSelect = document.getElementById("dateSelect");
//生成年份和月份下拉列表
genarateYear();
genarateMonth();
//generateDate();
//alert(genarateMonth());
//當年份和月份下拉列表被點擊時,生成日期
yearSelect.onchange = generateDate;
monthSelect.onchange = generateDate;
function generateDate(){
//獲取dateSelecte中的所有option,循環遍歷,刪除(解決日期重復的問題)
//var optionArr = dateSelect.childNodes;
var optionArr = dateSelect.options;
for(var i = 1; i < optionArr.length; i++){
dateSelect.removeChild(optionArr[i–]);
}
//dateSelect.options.length = 1; //也能解決日期重復的問題
var year = yearSelect.value;
//alert(year);
// 獲取當前選中的年份和月份
var month = monthSelect.value;
if(year == "" || month == "")
return;
// 計算當前年當前月有多少天
var days = 0;
if(month == 1 || month == 3 || month == 5 || month == 7 || month == 8 || month == 10 || month == 12)
days = 31;
else if (month == 2)
days = (year % 4 == 0 && year % 100 != 0 ) || (year % 400 == 0) ? 29 : 28;
else
days = 30;
// 創建option, 添加到dateSelect
for(var i = 1; i <= days; i++){
var option = document.createElement("option");
option.value = i;
option.innerHTML = i;
dateSelect.appendChild(option);
}
}
//生成和顯示年份的下拉列表
function genarateYear(){
var currentYear = new Date().getFullYear();
for(var i = currentYear; i > currentYear – 150; i–){
var option = document.createElement("option");
option.value = i;
option.innerHTML = i;
yearSelect.appendChild(option);
}
}
//生成和顯示月的你的下拉列表
function genarateMonth(){
for(var i = 1; i <= 12; i++){
var option = document.createElement("option");
option.value = i;
option.innerHTML = i;
monthSelect.appendChild(option);
}
}
}
</script>
</head>
<body>
<select id="yearSelect">
<option value="">-請選擇年份-</option>
</select>
<select id="monthSelect">
<option value="">-請選擇月份-</option>
</select>
<select id="dateSelect">
<option value="">-請選擇日期-</option>
</select>
</body>
</html>
摘自 代俊建的專欄
