浏览 5373 次
|
锁定老帖子 主题：js实现的年月日三级联动
该帖已经被评为新手帖
|
|
|---|---|
| 作者 | 正文 |
|
发表时间：2008-04-25
年默认加载到距离当前100年的年份，同时根据月份是否是闰年自动加载天数。。。
<table cellspacing="0" cellpadding="6" border="1">
<tr>
<td>
出生日期：
</td>
<td bgcolor="#FFFFFF" class="td_left">
<select name="year" onchange="getDates()">
<script language="javascript" type="text/javascript">
var date=new Date();
var year=date.getYear();
//加载距离当前年份100年的所有年份。。。
for(var i=year;i>=year-100;i--){
document.write("<option value="+i+">"+i+"</option>");
}
//创建option元素，并追加到指定select元素
function append(o,v){
var option=document.createElement("option");
option.value=v;
option.innerText=v;
o.appendChild(option);
}
//根据年月的值来加载日，判断了月份是否是闰年。。。
function getDates(){
var y=document.getElementsByName("year")[0].value;
var m=document.getElementsByName("month")[0].value;
var day=document.getElementsByName("day")[0];
day.innerHTML="";
if(m==1 || m==3 || m==5 || m==7 || m==8 || m==10 || m==12){
for(var j=1;j<=31;j++){
append(day,j);
}
}
else if(m==4 || m==6 || m==9 || m==11){
for(var j=1;j<=30;j++){
append(day,j);
}
}
else if(m==2){
var flag=true;
flag=y%4==0&&y%100!=0||y%400==0;
if(flag){
for(var j=1;j<=29;j++){
append(day,j);
}
}
else{
for(var j=1;j<=28;j++){
append(day,j);
}
}
}
}
</script>
</select>
年
<select name="month" onchange="getDates()">
<script language="javascript" type="text/javascript">
for(var i=1;i<=12;i++){
document.write("<option value="+i+">"+i+"</option>");
}
</script>
</select>
月
<select name="day">
<script language="javascript" type="text/javascript">
for(var i=1;i<=31;i++){
document.write("<option value="+i+">"+i+"</option>");
}
</script>
</select>
日
</td>
</tr>
</table>
声明：ITeye文章版权属于作者，受法律保护。没有作者书面许可不得转载。
推荐链接
|
| 返回顶楼 | |
|
发表时间：2008-04-28
今天项目跨浏览器测试，发现存在兼容性问题。。。
改了下。。。OK了，支持4种浏览器（IE,FireFox,Netscape,Maxthon)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
</head>
<table cellspacing="0" cellpadding="6" border="1">
<tr>
<td>
出生日期：
</td>
<td bgcolor="#FFFFFF" class="td_left">
<select name="year" onchange="getDates()">
<script language="javascript" type="text/javascript">
var date=new Date();
var year=date.getFullYear();
for(var i=year;i>=year-100;i--){
document.write("<option value="+i+">"+i+"</option>");
}
function append(o,v){
//var option=document.createElement("option");
//option.value=v;
//option.innerText=v;
var option=new Option(v,v);
//o.appendChild(option);
o.options.add(option);
}
function getDates(){
var y=document.getElementsByName("year")[0].value;
var m=document.getElementsByName("month")[0].value;
var day=document.getElementsByName("day")[0];
day.innerHTML="";
if(m==1 || m==3 || m==5 || m==7 || m==8 || m==10 || m==12){
for(var j=1;j<=31;j++){
append(day,j);
}
}
else if(m==4 || m==6 || m==9 || m==11){
for(var j=1;j<=30;j++){
append(day,j);
}
}
else if(m==2){
var flag=true;
flag=y%4==0&&y%100!=0||y%400==0;
if(flag){
for(var j=1;j<=29;j++){
append(day,j);
}
}
else{
for(var j=1;j<=28;j++){
append(day,j);
}
}
}
}
</script>
</select>
年
<select name="month" onchange="getDates()">
<script language="javascript" type="text/javascript">
for(var i=1;i<=12;i++){
document.write("<option value="+i+">"+i+"</option>");
}
</script>
</select>
月
<select name="day">
<script language="javascript" type="text/javascript">
for(var i=1;i<=31;i++){
document.write("<option value="+i+">"+i+"</option>");
}
</script>
</select>
日
</td>
</tr>
</table>
</html>
|
| 返回顶楼 | |
|
发表时间：2008-08-12
谢谢了，代码我收藏了啊
 
|
| 返回顶楼 | |
|
发表时间：2008-08-12
日历来的更简洁，让用户操作三遍，不符合用户体验。
|
| 返回顶楼 | |
