javascript 日期聯動選擇器 [其中的一些代碼值得學習]
2024-05-06 14:12:19
供稿：網友
[Ctrl+A 全選 注:如需引入外部Js需刷新才能執行]
[參數說明]
代碼如下:
var dateSelector = new DateSelector(年下拉ID, 月下拉ID, 日下拉ID, {floorYear: 向前幾年, ceilYear: 向后幾年});
dateSelector.onStart = dateSelector.onEnd = function(){ // 自定義開始結束事件
$('info').innerHTML = this.getSelText(this.year) + '年' +
('0' + this.getSelText(this.month)).slice(-2) + '月' +
('0' + this.getSelText(this.date)).slice(-2) + '日';
}
dateSelector.init(); // 初始化開始
[說明文字]
這里生成option的方法選擇了中規中矩的options[i].text = options[i].value = i;
期間用過一個這個方法:
container.options[container.options.length] = new Option(i, i, false, (i == sign ? true : false))
這個new Option有4個參數可用(text, value, defaultSelected, selected); 最后一個參數可以設置選中.
但一直沒有查到官方資料. 在IE6中也遇到了BUG.大家有用過的請指正.
BUG演示
這個在IE7,IE8,FF3等都沒問題.但在IE6就會選中的是前一個.現在還未知原因. (經過確認好像是IE Tester的問題.那么下面這個方案也是個簡潔的生成option方案)
測試代碼:
代碼如下:
<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>
