這篇文章的主旨是弄清楚如何根據(jù)實(shí)際需求實(shí)現(xiàn)一個(gè)聯(lián)動(dòng)菜單以及聯(lián)動(dòng)菜單的原理，實(shí)例是實(shí)現(xiàn)一個(gè)日期選擇下拉菜單。本文調(diào)試環(huán)境為IE6/firefox1.5。
首先來(lái)分析一下日期下拉菜單的需求。建議大家在寫任何程序的時(shí)候都應(yīng)該在動(dòng)手編程之前想清楚自己需要些什么，這樣編程才有效率。
年份： 一般來(lái)說(shuō)有一個(gè)有效年份，比如說(shuō)1900年至當(dāng)前年份才是為效的，這個(gè)要根據(jù)實(shí)際需求來(lái)確定，如果是該下拉菜單是用來(lái)選擇出生年月日還得把最大的年份減到一定的數(shù)目，如果有人的生日選擇了2005年（即當(dāng)前的年份），那是不正常的。
月份：沒(méi)有什么特殊需求，不管是哪一年都是有十二個(gè)月。
天數(shù)：每個(gè)月的天數(shù)都可能是不定的，當(dāng)然這可以根據(jù)一定的算法求出來(lái)，而它的根據(jù)就是當(dāng)前選擇的年份和月份。月份都有一個(gè)固定的天數(shù)，即一、三、五、七、八、十、十二月是三十一天，而四、六、九、十一月是三十天，二月份要根據(jù)當(dāng)年是否為閏年判斷是二十八天還是二十九天。求當(dāng)月的天數(shù)我提出一個(gè)比較簡(jiǎn)單的算法，可以只根據(jù)當(dāng)前的年份和月份就可以求出當(dāng)月的天數(shù)，這會(huì)在后邊講一講思路并將其實(shí)現(xiàn)。
好了，現(xiàn)在我們來(lái)具體實(shí)現(xiàn)這個(gè)日期聯(lián)動(dòng)下拉菜單。
聯(lián)動(dòng)下拉菜單是以兩個(gè)或多個(gè)select元素為單位的，為了讓這些菜單更多緊密的工作，我們可以實(shí)現(xiàn)一個(gè)類用來(lái)管理它們的初始化、事件，在這里就使用DateSelector為類名，它有三個(gè)屬性，分別為年、月、日的下拉菜單，而這三個(gè)select元素是由構(gòu)造函數(shù)的參數(shù)傳進(jìn)來(lái)的，另外為了更靈活地使用它，我們還可以再給DateSelector類的構(gòu)造函數(shù)增加一個(gè)（Date對(duì)象）或三個(gè)參數(shù)(int數(shù)值)，表示初始化的年月日。由于參數(shù)個(gè)數(shù)不定，我們可以不將另外增加的參數(shù)寫入?yún)?shù)表里，而是在運(yùn)行時(shí)判斷arguments對(duì)象的length屬性來(lái)執(zhí)行不同的操作。arguments對(duì)象存儲(chǔ)了當(dāng)前函數(shù)的參數(shù)信息，可以查閱一下相關(guān)的資料比如說(shuō)《Windows腳本技術(shù)》。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>如何實(shí)現(xiàn)一個(gè)日期下拉菜單</title>
<script type="text/javascript">
function DateSelector(selYear, selMonth, selDay)
{
this.selYear = selYear;
this.selMonth = selMonth;
this.selDay = selDay;
}
</script>
</head>
<body>
</body>
</html>
接下來(lái)開始對(duì)聯(lián)動(dòng)菜單進(jìn)行初始化，首先是年份，我們可以給類增加一個(gè)MinYear屬性表示最小的年份，再增加一個(gè)MaxYear表示最大的年份，實(shí)現(xiàn)一個(gè)InitYearSelect方法初始化年份，實(shí)現(xiàn)一個(gè)InitMonthSelect方法初始化月份。由于這幾個(gè)屬性和方法的思路都是很簡(jiǎn)單，就不一一講解，看看代碼是怎么寫的應(yīng)該就能夠明白，如果對(duì)類方面有不清楚有地方可以參考我發(fā)表在無(wú)憂腳本另一篇文章《由淺到深了解JavaScript類》。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>如何實(shí)現(xiàn)一個(gè)日期下拉菜單</title>
<script type="text/javascript">
function DateSelector(selYear, selMonth, selDay)
{
this.selYear = selYear;
this.selMonth = selMonth;
this.selDay = selDay;
this.InitYearSelect();
this.InitMonthSelect();
}
// 增加一個(gè)最大年份的屬性
DateSelector.prototype.MinYear = 1900;
// 增加一個(gè)最大年份的屬性
DateSelector.prototype.MaxYear = (new Date()).getFullYear();
// 初始化年份
DateSelector.prototype.InitYearSelect = function()
{
// 循環(huán)添加OPION元素到年份select對(duì)象中
for(var i = this.MaxYear; i >= this.MinYear; i--)
{
// 新建一個(gè)OPTION對(duì)象
var op = window.document.createElement("OPTION");
// 設(shè)置OPTION對(duì)象的值
op.value = i;
// 設(shè)置OPTION對(duì)象的內(nèi)容
op.innerHTML = i;
// 添加到年份select對(duì)象
this.selYear.appendChild(op);
}
}
// 初始化月份
DateSelector.prototype.InitMonthSelect = function()
{
// 循環(huán)添加OPION元素到月份select對(duì)象中
for(var i = 1; i < 13; i++)
{
// 新建一個(gè)OPTION對(duì)象
var op = window.document.createElement("OPTION");
// 設(shè)置OPTION對(duì)象的值
op.value = i;
// 設(shè)置OPTION對(duì)象的內(nèi)容
op.innerHTML = i;
// 添加到月份select對(duì)象
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");
// 新建一個(gè)DateSelector類的實(shí)例，將三個(gè)select對(duì)象傳進(jìn)去
new DateSelector(selYear, selMonth ,selDay);
</script>
</body>
</html>
接下來(lái)要對(duì)天數(shù)進(jìn)行初始化了，前邊有說(shuō)過(guò)天數(shù)是不定的，那要如何準(zhǔn)確求出它的天數(shù)呢？我們稍加分析就知道每個(gè)月的最后一天就是該月的天數(shù)，相當(dāng)于下一個(gè)月的第一天的前一天，比如說(shuō)我們要求2005年11月的天數(shù)，那我們只需要得到2005年12月一日的前一天即可得到2005年11月最后一天?？梢越oDateSelector添加一個(gè)方法DaysInMonth來(lái)實(shí)現(xiàn)該功能。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>如何實(shí)現(xiàn)一個(gè)日期下拉菜單</title>
<script type="text/javascript">
function DateSelector(selYear, selMonth, selDay)
{
this.selYear = selYear;
this.selMonth = selMonth;
this.selDay = selDay;
this.InitYearSelect();
this.InitMonthSelect();
}
// 增加一個(gè)最大年份的屬性
DateSelector.prototype.MinYear = 1900;
// 增加一個(gè)最大年份的屬性
DateSelector.prototype.MaxYear = (new Date()).getFullYear();
// 初始化年份
DateSelector.prototype.InitYearSelect = function()
{
// 循環(huán)添加OPION元素到年份select對(duì)象中
for(var i = this.MaxYear; i >= this.MinYear; i--)
{
// 新建一個(gè)OPTION對(duì)象
var op = window.document.createElement("OPTION");
// 設(shè)置OPTION對(duì)象的值
op.value = i;
// 設(shè)置OPTION對(duì)象的內(nèi)容
op.innerHTML = i;
// 添加到年份select對(duì)象
this.selYear.appendChild(op);
}
}
// 初始化月份
DateSelector.prototype.InitMonthSelect = function()
{
// 循環(huán)添加OPION元素到月份select對(duì)象中
for(var i = 1; i < 13; i++)
{
// 新建一個(gè)OPTION對(duì)象
var op = window.document.createElement("OPTION");
// 設(shè)置OPTION對(duì)象的值
op.value = i;
// 設(shè)置OPTION對(duì)象的內(nèi)容
op.innerHTML = i;
// 添加到月份select對(duì)象
this.selMonth.appendChild(op);
}
}
// 根據(jù)年份與月份獲取當(dāng)月的天數(shù)
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");
// 新建一個(gè)DateSelector類的實(shí)例，將三個(gè)select對(duì)象傳進(jìn)去
new DateSelector(selYear, selMonth ,selDay);
alert("2004年2月的天數(shù)為" + DateSelector.DaysInMonth(2004, 2));
alert("2005年2月的天數(shù)為" + DateSelector.DaysInMonth(2005, 2));
</script>
</body>
</html>
很明顯，這種方法根本不需要考慮到該年份是否為閏年就可以輕松求出指定月的天數(shù)。另外，有些網(wǎng)友可能會(huì)對(duì)“var date = new Date(year, month, 0);”這句代碼覺得奇怪，傳入的是2005,2,0，這看起來(lái)似乎是求二月份第一天的前一天即一月份的最后一天，為什么還會(huì)得到二月份的天數(shù)？這里必須說(shuō)明一天，JavaScript的Date對(duì)象里的月份是由0開始到11結(jié)束，也就是說(shuō)0表示一月，2表示三月，所以就有這種錯(cuò)覺，在使用JavaScript的Date對(duì)象時(shí)要特別注意這一點(diǎn)。
好了，天數(shù)的算法也解決了，那么我們可以輕松寫出一個(gè)InitDaySelect方法來(lái)初始化天數(shù)了，在這個(gè)方法里要根據(jù)當(dāng)前年份下拉菜單和月份下拉菜單的值算出該月的天數(shù)，由于天數(shù)是變動(dòng)的，因此我們?cè)谠摲椒ɡ镆部墒孪惹蹇仗鞌?shù)下拉菜單的內(nèi)容。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>如何實(shí)現(xiàn)一個(gè)日期下拉菜單</title>
<script type="text/javascript">
function DateSelector(selYear, selMonth, selDay)
{
this.selYear = selYear;
this.selMonth = selMonth;
this.selDay = selDay;
this.InitYearSelect();
this.InitMonthSelect();
this.InitDaySelect();
}
// 增加一個(gè)最大年份的屬性
DateSelector.prototype.MinYear = 1900;
// 增加一個(gè)最大年份的屬性
DateSelector.prototype.MaxYear = (new Date()).getFullYear();
// 初始化年份
DateSelector.prototype.InitYearSelect = function()
{
// 循環(huán)添加OPION元素到年份select對(duì)象中
for(var i = this.MaxYear; i >= this.MinYear; i--)
{
// 新建一個(gè)OPTION對(duì)象
var op = window.document.createElement("OPTION");
// 設(shè)置OPTION對(duì)象的值
op.value = i;
// 設(shè)置OPTION對(duì)象的內(nèi)容
op.innerHTML = i;
// 添加到年份select對(duì)象
this.selYear.appendChild(op);
}
}
// 初始化月份
DateSelector.prototype.InitMonthSelect = function()
{
// 循環(huán)添加OPION元素到月份select對(duì)象中
for(var i = 1; i < 13; i++)
{
// 新建一個(gè)OPTION對(duì)象
var op = window.document.createElement("OPTION");
// 設(shè)置OPTION對(duì)象的值
op.value = i;
// 設(shè)置OPTION對(duì)象的內(nèi)容
op.innerHTML = i;
// 添加到月份select對(duì)象
this.selMonth.appendChild(op);
}
}
// 根據(jù)年份與月份獲取當(dāng)月的天數(shù)
DateSelector.DaysInMonth = function(year, month)
{
var date = new Date(year, month, 0);
return date.getDate();
}
// 初始化天數(shù)
DateSelector.prototype.InitDaySelect = function()
{
// 使用parseInt函數(shù)獲取當(dāng)前的年份和月份
var year = parseInt(this.selYear.value);
var month = parseInt(this.selMonth.value);
// 獲取當(dāng)月的天數(shù)
var daysInMonth = DateSelector.DaysInMonth(year, month);
// 清空原有的選項(xiàng)
this.selDay.options.length = 0;
// 循環(huán)添加OPION元素到天數(shù)select對(duì)象中
for(var i = 1; i <= daysInMonth ; i++)
{
// 新建一個(gè)OPTION對(duì)象
var op = window.document.createElement("OPTION");
// 設(shè)置OPTION對(duì)象的值
op.value = i;
// 設(shè)置OPTION對(duì)象的內(nèi)容
op.innerHTML = i;
// 添加到天數(shù)select對(duì)象
this.selDay.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");
// 新建一個(gè)DateSelector類的實(shí)例，將三個(gè)select對(duì)象傳進(jìn)去
new DateSelector(selYear, selMonth ,selDay);
</script>
</body>
</html>
現(xiàn)在已經(jīng)寫好幾個(gè)方法用來(lái)初始化三個(gè)下拉菜單的選項(xiàng)了，我們需要做的是讓它們結(jié)合并動(dòng)起來(lái)。如果年份或月份有變動(dòng)，那么應(yīng)該重新計(jì)算天數(shù)并且重新初始化天數(shù)，這可以通過(guò)selYear和selMonth的onchange來(lái)實(shí)現(xiàn)。由于這三個(gè)下拉菜單是要緊密聯(lián)動(dòng)的，因此特地給它們?cè)黾右粋€(gè)屬性Selector，值為當(dāng)前的DateSelector實(shí)例。同時(shí)實(shí)現(xiàn)selYear和selMonth的onchange，如果發(fā)生onchange則調(diào)用InitDaySelect重新初始化selDay下拉菜單。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>如何實(shí)現(xiàn)一個(gè)日期下拉菜單</title>
<script type="text/javascript">
function DateSelector(selYear, selMonth, selDay)
{
this.selYear = selYear;
this.selMonth = selMonth;
this.selDay = selDay;
this.InitYearSelect();
this.InitMonthSelect();
this.InitDaySelect();
this.selYear.Group = this;
this.selMonth.Group = this;
// 給年份、月份下拉菜單添加處理onchange事件的函數(shù)
if(window.document.all != null) // IE
{
this.selYear.attachEvent("onchange", DateSelector.Onchange);
this.selMonth.attachEvent("onchange", DateSelector.Onchange);
}
else // Firefox
{
this.selYear.addEventListener("change", DateSelector.Onchange, false);
this.selMonth.addEventListener("change", DateSelector.Onchange, false);
}
}
// 增加一個(gè)最大年份的屬性
DateSelector.prototype.MinYear = 1900;
// 增加一個(gè)最大年份的屬性
DateSelector.prototype.MaxYear = (new Date()).getFullYear();
// 初始化年份
DateSelector.prototype.InitYearSelect = function()
{
// 循環(huán)添加OPION元素到年份select對(duì)象中
for(var i = this.MaxYear; i >= this.MinYear; i--)
{
// 新建一個(gè)OPTION對(duì)象
var op = window.document.createElement("OPTION");
// 設(shè)置OPTION對(duì)象的值
op.value = i;
// 設(shè)置OPTION對(duì)象的內(nèi)容
op.innerHTML = i;
// 添加到年份select對(duì)象
this.selYear.appendChild(op);
}
}
// 初始化月份
DateSelector.prototype.InitMonthSelect = function()
{
// 循環(huán)添加OPION元素到月份select對(duì)象中
for(var i = 1; i < 13; i++)
{
// 新建一個(gè)OPTION對(duì)象
var op = window.document.createElement("OPTION");
// 設(shè)置OPTION對(duì)象的值
op.value = i;
// 設(shè)置OPTION對(duì)象的內(nèi)容
op.innerHTML = i;
// 添加到月份select對(duì)象
this.selMonth.appendChild(op);
}
}
// 根據(jù)年份與月份獲取當(dāng)月的天數(shù)
DateSelector.DaysInMonth = function(year, month)
{
var date = new Date(year, month, 0);
return date.getDate();
}
// 初始化天數(shù)
DateSelector.prototype.InitDaySelect = function()
{
// 使用parseInt函數(shù)獲取當(dāng)前的年份和月份
var year = parseInt(this.selYear.value);
var month = parseInt(this.selMonth.value);
// 獲取當(dāng)月的天數(shù)
var daysInMonth = DateSelector.DaysInMonth(year, month);
// 清空原有的選項(xiàng)
this.selDay.options.length = 0;
// 循環(huán)添加OPION元素到天數(shù)select對(duì)象中
for(var i = 1; i <= daysInMonth ; i++)
{
// 新建一個(gè)OPTION對(duì)象
var op = window.document.createElement("OPTION");
// 設(shè)置OPTION對(duì)象的值
op.value = i;
// 設(shè)置OPTION對(duì)象的內(nèi)容
op.innerHTML = i;
// 添加到天數(shù)select對(duì)象
this.selDay.appendChild(op);
}
}
// 處理年份和月份onchange事件的方法，它獲取事件來(lái)源對(duì)象（即selYear或selMonth）
// 并調(diào)用它的Group對(duì)象（即DateSelector實(shí)例，請(qǐng)見構(gòu)造函數(shù)）提供的InitDaySelect方法重新初始化天數(shù)
// 參數(shù)e為event對(duì)象
DateSelector.Onchange = function(e)
{
var selector = window.document.all != null ? e.srcElement : e.target;
selector.Group.InitDaySelect();
}
</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");
// 新建一個(gè)DateSelector類的實(shí)例，將三個(gè)select對(duì)象傳進(jìn)去
new DateSelector(selYear, selMonth ,selDay);
</script>
</body>
</html>
到此為止我們已經(jīng)基本實(shí)現(xiàn)DateSelector類要提供的功能了，為了更靈活地控制它，我們應(yīng)該給它增加設(shè)定初始值的功能。一般來(lái)說(shuō)有兩種需求，第一種是傳入一個(gè)Date對(duì)象，第二種是傳入三個(gè)值分別表示年、月、日，也就是說(shuō)我們必須重載構(gòu)造函數(shù)，形式如下：
function DateSelector(selYear, selMonth, selDay)
function DateSelector(selYear, selMonth, selDay, date)
function DateSelector(selYear, selMonth, selDay, year, month, day)
當(dāng)然，JavaScript沒(méi)有重載的概念，但我們可以給它模擬出來(lái)，方法就是根據(jù)傳入?yún)?shù)的個(gè)數(shù)（即arguments對(duì)象的length）以及類型來(lái)判斷，這需要對(duì)原有的構(gòu)造函數(shù)進(jìn)行一定的改動(dòng)使之更模塊化地實(shí)現(xiàn)這三種情況。由于年份和月份是固定不變的，參數(shù)只會(huì)改變selYear和selMonth的已選選項(xiàng)，而selDay則要根據(jù)selYear和selMonth的值再動(dòng)態(tài)生成，因此我們將初始化菜單代碼再提出來(lái)寫一個(gè)InitSelector方法里，它有三個(gè)參數(shù)，分別是year, month, day，功能是根據(jù)這三個(gè)參數(shù)來(lái)生成相應(yīng)的菜單選項(xiàng)，我們這次調(diào)試使用2004年2月29日為初始值。要設(shè)置初始值的時(shí)候一般我們會(huì)循環(huán)訪問(wèn)option的值，但這里情況特殊，我們是可以根據(jù)一定的計(jì)算來(lái)得到默認(rèn)選擇的option的下標(biāo)的。
年份下標(biāo) = MaxYear - year
月份下標(biāo) = month - 1
天數(shù)下標(biāo) = day - 1
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>如何實(shí)現(xiàn)一個(gè)日期下拉菜單</title>
<script type="text/javascript">
function DateSelector(selYear, selMonth, selDay)
{
this.selYear = selYear;
this.selMonth = selMonth;
this.selDay = selDay;
this.selYear.Group = this;
this.selMonth.Group = this;
// 給年份、月份下拉菜單添加處理onchange事件的函數(shù)
if(window.document.all != null) // IE
{
this.selYear.attachEvent("onchange", DateSelector.Onchange);
this.selMonth.attachEvent("onchange", DateSelector.Onchange);
}
else // Firefox
{
this.selYear.addEventListener("change", DateSelector.Onchange, false);
this.selMonth.addEventListener("change", DateSelector.Onchange, false);
}
if(arguments.length == 4) // 如果傳入?yún)?shù)個(gè)數(shù)為4，最后一個(gè)參數(shù)必須為Date對(duì)象
this.InitSelector(arguments[3].getFullYear(), arguments[3].getMonth() + 1, arguments[3].getDate());
else if(arguments.length == 6) // 如果傳入?yún)?shù)個(gè)數(shù)為6，最后三個(gè)參數(shù)必須為初始的年月日數(shù)值
this.InitSelector(arguments[3], arguments[4], arguments[5]);
else // 默認(rèn)使用當(dāng)前日期
{
var dt = new Date();
this.InitSelector(dt.getFullYear(), dt.getMonth() + 1, dt.getDate());
}
}
// 增加一個(gè)最大年份的屬性
DateSelector.prototype.MinYear = 1900;
// 增加一個(gè)最大年份的屬性
DateSelector.prototype.MaxYear = (new Date()).getFullYear();
// 初始化年份
DateSelector.prototype.InitYearSelect = function()
{
// 循環(huán)添加OPION元素到年份select對(duì)象中
for(var i = this.MaxYear; i >= this.MinYear; i--)
{
// 新建一個(gè)OPTION對(duì)象
var op = window.document.createElement("OPTION");
// 設(shè)置OPTION對(duì)象的值
op.value = i;
// 設(shè)置OPTION對(duì)象的內(nèi)容
op.innerHTML = i;
// 添加到年份select對(duì)象
this.selYear.appendChild(op);
}
}
// 初始化月份
DateSelector.prototype.InitMonthSelect = function()
{
// 循環(huán)添加OPION元素到月份select對(duì)象中
for(var i = 1; i < 13; i++)
{
// 新建一個(gè)OPTION對(duì)象
var op = window.document.createElement("OPTION");
// 設(shè)置OPTION對(duì)象的值
op.value = i;
// 設(shè)置OPTION對(duì)象的內(nèi)容
op.innerHTML = i;
// 添加到月份select對(duì)象
this.selMonth.appendChild(op);
}
}
// 根據(jù)年份與月份獲取當(dāng)月的天數(shù)
DateSelector.DaysInMonth = function(year, month)
{
var date = new Date(year, month, 0);
return date.getDate();
}
// 初始化天數(shù)
DateSelector.prototype.InitDaySelect = function()
{
// 使用parseInt函數(shù)獲取當(dāng)前的年份和月份
var year = parseInt(this.selYear.value);
var month = parseInt(this.selMonth.value);
// 獲取當(dāng)月的天數(shù)
var daysInMonth = DateSelector.DaysInMonth(year, month);
// 清空原有的選項(xiàng)
this.selDay.options.length = 0;
// 循環(huán)添加OPION元素到天數(shù)select對(duì)象中
for(var i = 1; i <= daysInMonth ; i++)
{
// 新建一個(gè)OPTION對(duì)象
var op = window.document.createElement("OPTION");
// 設(shè)置OPTION對(duì)象的值
op.value = i;
// 設(shè)置OPTION對(duì)象的內(nèi)容
op.innerHTML = i;
// 添加到天數(shù)select對(duì)象
this.selDay.appendChild(op);
}
}
// 處理年份和月份onchange事件的方法，它獲取事件來(lái)源對(duì)象（即selYear或selMonth）
// 并調(diào)用它的Group對(duì)象（即DateSelector實(shí)例，請(qǐng)見構(gòu)造函數(shù)）提供的InitDaySelect方法重新初始化天數(shù)
// 參數(shù)e為event對(duì)象
DateSelector.Onchange = function(e)
{
var selector = window.document.all != null ? e.srcElement : e.target;
selector.Group.InitDaySelect();
}
// 根據(jù)參數(shù)初始化下拉菜單選項(xiàng)
DateSelector.prototype.InitSelector = function(year, month, day)
{
// 由于外部是可以調(diào)用這個(gè)方法，因此我們?cè)谶@里也要將selYear和selMonth的選項(xiàng)清空掉
// 另外因?yàn)镮nitDaySelect方法已經(jīng)有清空天數(shù)下拉菜單，因此這里就不用重復(fù)工作了
this.selYear.options.length = 0;
this.selMonth.options.length = 0;
// 初始化年、月
this.InitYearSelect();
this.InitMonthSelect();
// 設(shè)置年、月初始值
this.selYear.selectedIndex = this.MaxYear - year;
this.selMonth.selectedIndex = month - 1;
// 初始化天數(shù)
this.InitDaySelect();
// 設(shè)置天數(shù)初始值
this.selDay.selectedIndex = day - 1;
}
</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");
// 新建一個(gè)DateSelector類的實(shí)例，將三個(gè)select對(duì)象傳進(jìn)去
new DateSelector(selYear, selMonth ,selDay, 2004, 2, 29);
// 也可以試試下邊的代碼
// var dt = new Date(2004, 1, 29);
// new DateSelector(selYear, selMonth ,selDay, dt);
</script>
</body>
</html>
好了，日期下拉菜單已經(jīng)能夠如我們想象的那樣開始工作了，在調(diào)用的時(shí)候我們只需要執(zhí)行new DateSelector(selYear, selMonth ,selDay, 2004, 2, 29);就可以，而且它內(nèi)部關(guān)系緊密，你同一個(gè)頁(yè)面可以同時(shí)運(yùn)行好幾組日期下拉菜單而互不影響，這也是我要采用類的形式而不是采用一組函數(shù)來(lái)實(shí)現(xiàn)的緣由了，我以后寫的文章也會(huì)盡可能采用類的形式，這樣寫出來(lái)的代碼使用起來(lái)會(huì)更加方便。像以往一樣，我也得說(shuō)88啦，希望大家能夠繼續(xù)支持無(wú)憂腳本的原創(chuàng)文章，并且踴躍參與到其中來(lái)。