网络编程 
首页 > 网络编程 > 浏览文章

javascript 日期联动选择器 [其中的一些代码值得学习]

(编辑:jimmy 日期: 2026/3/10 浏览:3 次 )

[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>
上一篇:javascript实现的仿51job地址多项选择方式效果
下一篇:js checkbox全选并将获取值放到input里边
一句话新闻
一文看懂荣耀MagicBook Pro 16
荣耀猎人回归!七大亮点看懂不只是轻薄本,更是游戏本的MagicBook Pro 16.
人们对于笔记本电脑有一个固有印象:要么轻薄但性能一般,要么性能强劲但笨重臃肿。然而,今年荣耀新推出的MagicBook Pro 16刷新了人们的认知——发布会上,荣耀宣布猎人游戏本正式回归,称其继承了荣耀 HUNTER 基因,并自信地为其打出“轻薄本,更是游戏本”的口号。
众所周知,寻求轻薄本的用户普遍更看重便携性、外观造型、静谧性和打字办公等用机体验,而寻求游戏本的用户则普遍更看重硬件配置、性能释放等硬核指标。把两个看似难以相干的产品融合到一起,我们不禁对它产生了强烈的好奇:作为代表荣耀猎人游戏本的跨界新物种,它究竟做了哪些平衡以兼顾不同人群的各类需求呢?