zl程序教程

您现在的位置是:首页 >  后端

当前栏目

js简单的年月联动实现代码

JS代码 实现 简单 联动
2023-06-13 09:14:25 时间
HTML
复制代码代码如下:

<SELECTNAME="SelTjYear">
</SELECT>
<SELECTNAME="SelTjMonth">
</SELECT>

源码:
复制代码代码如下:

functionvYearMonth(yearObjId,monthObjId){
varselYear=document.getElementById(yearObjId);
varselMonth=document.getElementById(monthObjId);
varmyDate=newDate();//当前日期
varmyYear=myDate.getFullYear();//当前年
varmyMonth=myDate.getMonth()+1;//当前月
varyearMin=-2;//年份范围值,也当前年比较的差值
varyearMax=10;//年份范围值,也当前年比较的差值

//Begin年*******************************
selYear.options.add(newOption("",""));
for(vari=yearMin;i<yearMax;i++){
varopt=newOption(myYear+i,myYear+i);
selYear.options.add(opt);
}
//这里1-yearMin表示选中当前年,用1是因为开头有插入""
selYear.options.selectedIndex=1-yearMin;
//End年*******************************

//Begin月*******************************
selMonth.options.add(newOption("",""));
for(vari=0;i<12;i++){
varopt=newOption(i+1,i+1);
selMonth.options.add(opt);
}
//选中当前月
selMonth.options.selectedIndex=myMonth;
//End月*******************************


selYear.onchange=function(){
if(this.value==""){
selMonth.selectedIndex=0;
}
else{
if(selMonth.value==""){
selMonth.selectedIndex=myMonth;
}
}
};
}

调用:
复制代码代码如下:
vYearMonth("SelTjYear","SelTjMonth");

完整的演示代码: