快捷導(dǎo)航

javascript 日期聯(lián)動(dòng)選擇器 [其中的一些代碼值得學(xué)習(xí)]

更新時(shí)間：2009年12月15日 18:32:20 作者：

javascript 日期聯(lián)動(dòng)選擇器，簡單的看了下代碼非常不錯(cuò)，都考慮到了標(biāo)準(zhǔn)，兼容性也不錯(cuò)。學(xué)習(xí)js的朋友有福了。

[參數(shù)說明]

 
var dateSelector = new DateSelector(年下拉ID, 月下拉ID, 日下拉ID, {floorYear: 向前幾年, ceilYear: 向后幾年}); 
dateSelector.onStart = dateSelector.onEnd = function(){ // 自定義開始結(jié)束事件 
$('info').innerHTML = this.getSelText(this.year) + '年' + 
('0' + this.getSelText(this.month)).slice(-2) + '月' + 
('0' + this.getSelText(this.date)).slice(-2) + '日'; 
} 
dateSelector.init(); // 初始化開始 

[說明文字]

這里生成option的方法選擇了中規(guī)中矩的options[i].text = options[i].value = i;

期間用過一個(gè)這個(gè)方法:

container.options[container.options.length] = new Option(i, i, false, (i == sign ? true : false))
這個(gè)new Option有4個(gè)參數(shù)可用(text, value, defaultSelected, selected); 最后一個(gè)參數(shù)可以設(shè)置選中.

但一直沒有查到官方資料. 在IE6中也遇到了BUG.大家有用過的請指正.

BUG演示

這個(gè)在IE7,IE8,FF3等都沒問題.但在IE6就會(huì)選中的是前一個(gè).現(xiàn)在還未知原因. (經(jīng)過確認(rèn)好像是IE Tester的問題.那么下面這個(gè)方案也是個(gè)簡潔的生成option方案)

測試代碼:

復(fù)制代碼代碼如下:

 
<select id="year"></select> 
<script type="text/javascript"> 
<!-- 
var osel = document.getElementById('year'); 
var sign = 2008; 
for(var i = 2001; i < 2010; i++) { 
osel.options[osel.options.length] = new Option(i, i, false, (i == sign ? true : false)); 
} 
//--> 
</script> 

您可能感興趣的文章: