http://www.blueidea.com/tech/web/2006/3169.asp 轉
這篇文章的主旨是弄清楚如何根據實際需求實現一個聯動菜單以及聯動菜單的原理，實例是實現一個日期選擇下拉菜單。本文調試環境為IE6/firefox1.5。
首先來分析一下日期下拉菜單的需求。建議大家在寫任何程序的時候都應該在動手編程之前想清楚自己需要些什么，這樣編程才有效率。
年份： 一般來說有一個有效年份，比如說1900年至當前年份才是為效的，這個要根據實際需求來確定，如果是該下拉菜單是用來選擇出生年月日還得把最大的年份減到一定的數目，如果有人的生日選擇了2005年（即當前的年份），那是不正常的。
月份：沒有什么特殊需求，不管是哪一年都是有十二個月。
天數：每個月的天數都可能是不定的，當然這可以根據一定的算法求出來，而它的根據就是當前選擇的年份和月份。月份都有一個固定的天數，即一、三、五、七、八、十、十二月是三十一天，而四、六、九、十一月是三十天，二月份要根據當年是否為閏年判斷是二十八天還是二十九天。求當月的天數我提出一個比較簡單的算法，可以只根據當前的年份和月份就可以求出當月的天數，這會在后邊講一講思路並將其實現。
好了，現在我們來具體實現這個日期聯動下拉菜單。
聯動下拉菜單是以兩個或多個select元素為單位的，為了讓這些菜單更多緊密的工作，我們可以實現一個類用來管理它們的初始化、事件，在這里就使用DateSelector為類名，它有三個屬性，分別為年、月、日的下拉菜單，而這三個select元素是由構造函數的參數傳進來的，另外為了更靈活地使用它，我們還可以再給DateSelector類的構造函數增加一個（Date對象）或三個參數(int數值)，表示初始化的年月日。由於參數個數不定，我們可以不將另外增加的參數寫入參數表里，而是在運行時判斷arguments對象的length屬性來執行不同的操作。arguments對象存儲了當前函數的參數信息，可以查閱一下相關的資料比如說《Windows腳本技術》。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>如何實現一個日期下拉菜單</title>
<script type="text/javascript">
function DateSelector(selYear, selMonth, selDay)
{
this.selYear = selYear;
this.selMonth = selMonth;
this.selDay = selDay;
}
</script>
</head>
<body>
</body>
</html>
接下來開始對聯動菜單進行初始化，首先是年份，我們可以給類增加一個MinYear屬性表示最小的年份，再增加一個MaxYear表示最大的年份，實現一個InitYearSelect方法初始化年份，實現一個InitMonthSelect方法初始化月份。由於這幾個屬性和方法的思路都是很簡單，就不一一講解，看看代碼是怎么寫的應該就能夠明白，如果對類方面有不清楚有地方可以參考我發表在無憂腳本另一篇文章《由淺到深了解JavaScript類》。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>如何實現一個日期下拉菜單</title>
<script type="text/javascript">
function DateSelector(selYear, selMonth, selDay)
{
this.selYear = selYear;
this.selMonth = selMonth;
this.selDay = selDay;
this.InitYearSelect();
this.InitMonthSelect();
}
// 增加一個最大年份的屬性
DateSelector.prototype.MinYear = 1900;
// 增加一個最大年份的屬性
DateSelector.prototype.MaxYear = (new Date()).getFullYear();
// 初始化年份
DateSelector.prototype.InitYearSelect = function()
{
// 循環添加OPION元素到年份select對象中
for(var i = this.MaxYear; i >= this.MinYear; i--)
{
// 新建一個OPTION對象
var op = window.document.createElement("OPTION");
// 設置OPTION對象的值
op.value = i;
// 設置OPTION對象的內容
op.innerHTML = i;
// 添加到年份select對象
this.selYear.appendChild(op);
}
}
// 初始化月份
DateSelector.prototype.InitMonthSelect = function()
{
// 循環添加OPION元素到月份select對象中
for(var i = 1; i < 13; i++)
{
// 新建一個OPTION對象
var op = window.document.createElement("OPTION");
// 設置OPTION對象的值
op.value = i;
// 設置OPTION對象的內容
op.innerHTML = i;
// 添加到月份select對象
this.selMonth.appendChild(op);
}
}
</script>
</head>
<body>
<select id="selYear"></select>
<select id="selMonth"></select>
<select id="selDay"></select>
<script type="text/javascript">
var selYear = window.document.getElementById("selYear");
var selMonth = window.document.getElementById("selMonth");
var selDay = window.document.getElementById("selDay");
// 新建一個DateSelector類的實例，將三個select對象傳進去
new DateSelector(selYear, selMonth ,selDay);
</script>
</body>
</html>
接下來要對天數進行初始化了，前邊有說過天數是不定的，那要如何准確求出它的天數呢？我們稍加分析就知道每個月的最后一天就是該月的天數，相當於下一個月的第一天的前一天，比如說我們要求2005年11月的天數，那我們只需要得到2005年12月一日的前一天即可得到2005年11月最后一天。可以給DateSelector添加一個方法DaysInMonth來實現該功能。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>如何實現一個日期下拉菜單</title>
<script type="text/javascript">
function DateSelector(selYear, selMonth, selDay)
{
this.selYear = selYear;
this.selMonth = selMonth;
this.selDay = selDay;
this.InitYearSelect();
this.InitMonthSelect();
}
// 增加一個最大年份的屬性
DateSelector.prototype.MinYear = 1900;
// 增加一個最大年份的屬性
DateSelector.prototype.MaxYear = (new Date()).getFullYear();
// 初始化年份
DateSelector.prototype.InitYearSelect = function()
{
// 循環添加OPION元素到年份select對象中
for(var i = this.MaxYear; i >= this.MinYear; i--)
{
// 新建一個OPTION對象
var op = window.document.createElement("OPTION");
// 設置OPTION對象的值
op.value = i;
// 設置OPTION對象的內容
op.innerHTML = i;
// 添加到年份select對象
this.selYear.appendChild(op);
}
}
// 初始化月份
DateSelector.prototype.InitMonthSelect = function()
{
// 循環添加OPION元素到月份select對象中
for(var i = 1; i < 13; i++)
{
// 新建一個OPTION對象
var op = window.document.createElement("OPTION");
// 設置OPTION對象的值
op.value = i;
// 設置OPTION對象的內容
op.innerHTML = i;
// 添加到月份select對象
this.selMonth.appendChild(op);
}
}
// 根據年份與月份獲取當月的天數
DateSelector.DaysInMonth = function(year, month)
{
var date = new Date(year, month, 0);
return date.getDate();
}
</script>
</head>
<body>
<select id="selYear"></select>
<select id="selMonth"></select>
<select id="selDay"></select>
<script type="text/javascript">
var selYear = window.document.getElementById("selYear");
var selMonth = window.document.getElementById("selMonth");
var selDay = window.document.getElementById("selDay");
// 新建一個DateSelector類的實例，將三個select對象傳進去
new DateSelector(selYear, selMonth ,selDay);
alert("2004年2月的天數為" + DateSelector.DaysInMonth(2004, 2));
alert("2005年2月的天數為" + DateSelector.DaysInMonth(2005, 2));
</script>
</body>
</html>
很明顯，這種方法根本不需要考慮到該年份是否為閏年就可以輕松求出指定月的天數。另外，有些網友可能會對“var date = new Date(year, month, 0);”這句代碼覺得奇怪，傳入的是2005,2,0，這看起來似乎是求二月份第一天的前一天即一月份的最后一天，為什么還會得到二月份的天數？這里必須說明一天，JavaScript的Date對象里的月份是由0開始到11結束，也就是說0表示一月，2表示三月，所以就有這種錯覺，在使用JavaScript的Date對象時要特別注意這一點。