一個(gè)日期聯(lián)動(dòng)選擇器,年月日聯(lián)動(dòng)顯示,準確顯示日期(包括閏年日期),可自定義日期范圍。
效果預覽:
年 月 日
你選擇的日期:2010/11/28
程序說(shuō)明
【select】
先說(shuō)清空一個(gè)select,最簡(jiǎn)單的方法是把options的length設為0就可以了:
給select添加option,有多個(gè)方法,如果用dom的標準方法是:
對于option有更方便的方法:
其中new Option的第一個(gè)參數是顯示的文本值,第二個(gè)是value值。
利用options.add的第二個(gè)可選參數可以把options插入到指定的索引位置,還有一個(gè)remove方法可以移除指定索引的options。
要注意的是options下標從0開(kāi)始。
不過(guò)我這里用了一個(gè)看來(lái)比較笨的方法:

別看這么笨,卻是最有效率的,而且不用每次都清空select,下面可以測試一下:
下面是完整測試代碼:

還有一個(gè)更快的方法,就是使用outerHTML,但這個(gè)會(huì )對select本身操作而且不兼容就不推薦了。
最后就是設置默認項,一般的方法是設置selectedIndex屬性:
但要注意的是在ie6如果用dom方法創(chuàng )建option,然后立即設置selectedIndex會(huì )無(wú)效。
可以測試一下(在ie6測試):
測試代碼:

除了換另外兩個(gè)方法創(chuàng )建select,還有三個(gè)方法解決,首先可以在添加option的同時(shí)設置:
還可以用setTimeout延遲一下:
最后是比較推薦的用setAttribute來(lái)設置:
注意這個(gè)方法如果結合笨方法使用的話(huà)在ff中會(huì )設置失敗。
這樣關(guān)于select的相關(guān)操作就介紹完了。
日期相關(guān)的操作請參考blog式日歷控件
使用說(shuō)明:
首先是實(shí)例化一個(gè)DateSelector,其中三個(gè)參數分別是年月日的select對象。
可選參數:
Year: 0,//年
Month: 0,//月
Day: 0,//日
MinYear: 0,//最小年份
MaxYear: 0,//最大年份
onChange: function(){}//日期改變時(shí)執行
程序代碼:

聯(lián)系客服