html+js动态显示3个select标签
以下是用HTML+JS针对select标签做的操作。
判断闰年和平年下2月的天数，也判断大也和小月的天数，并动态显示出来。（代码有些地方还不够简洁！）
在做的时候碰到了一个问题，在动态往select标签里添加内容的时候，用document.write添加时可以显示，但用document.getElementById("select标签ID").innerHTML添加时就不行了，原来innerHTML对select标签不起作用。
经过在网上搜索，找到了解决办法。
Code<!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>
<title>日期JS</title>
<script type="text/javascript">
var date=new Date();
//读出所有年份
var startYear=1970;
var nowYear=date.getFullYear();
var yearArr=new Array();
var arrIndex=0;
for(var i=startYear;i<=nowYear;i++)
{
yearArr[arrIndex]=i;
arrIndex++;
}
//读出所有月份
var nowMonth=date.getMonth();
var monthArr=new Array();
for(var i=1;i<=12;i++)
{
monthArr[i-1]=i;
}
//读出所有日期
var nowDate=date.getDate();
var dateArr=new Array();
function ArrDates(count)
{
dateArr=new Array();
for(var i=1;i<=count;i++)
{
dateArr[i-1]=i;
}
}
//判断闰年
//value:选中的年
function ShowDate(value,_classid)
{
//判断是不是闰年
var reg = /^[0-9]*[1-9][0-9]*$/;
var year=parseInt(value);
if(reg.test(year))
{
if(year % 4 == 0 && year % 100 != 0 || year % 400 == 0)
{
if(_classid == "1")
{
alert(year+"是闰年");
}
return "true";//闰年
}
else
{
if(_classid == "1")
{
alert(year+"不是闰年");
}
return "false";//不是闰年
}
}
else
{
if(_classid == "1")
{
alert("输入不合法，必须是正整数");
}
return "error";//输入内容不对
}
}
//显示天数
//month:选中的月
//yearBoll:是否为闰年
function ShowNowDate(month,yearBoll)
{
switch(parseInt(month))
{
case 1:
ArrDates(31);
break;
case 2:
if(yearBoll == "true")
{
ArrDates(29);
}
else if(yearBoll == "false")
{
ArrDates(28);
}
break;
case 3:
ArrDates(31);
break;
case 4:
ArrDates(30);
break;
case 5:
ArrDates(31);
break;
case 6:
ArrDates(30);
break;
case 7:
ArrDates(31);
break;
case 8:
ArrDates(31);
break;
case 9:
ArrDates(30);
break;
case 10:
ArrDates(31);
break;
case 11:
ArrDates(30);
break;
case 12:
ArrDates(31);
break;
}
}
////////
//通过年、月来正确显示日期总天数
///////
//yObj：帮定年的select前台控件
//ySel：当前显示的年份
//mObj：帮定月的select前台控件
//mSel：当前显示的月份
function OnLoadDate(ySel,mSel)
{
if(mSel != "2")
{
ShowNowDate(mSel,"");
}
else
{
ShowNowDate(mSel,ShowDate(ySel));
}
var html="";
var sel2=document.getElementById("lw_select_date");
for(var i=0;i<dateArr.length;i++)
{
if(i==0)
{
var options=new Option(i,dateArr[i]);
sel2.add(options);
html+="<option value="+ i +" selected>"+ dateArr[i] +"</option>";
}
else
{
var options=new Option(dateArr[i],i);
sel2.add(options);
}
}
}
</script>
</head>
<body>
<input value="" id="lw_date" name="lw_date" />
<input type="button" value="判断年份是否为闰年"
onclick="javascript:ShowDate(document.getElementById('lw_date').value,'1');"/>
<div>
<select id="lw_select_year"
onchange="javascript:var month_obj=document.getElementById('lw_select_month');
OnLoadDate(this.options[this.selectedIndex].text,month_obj.options[month_obj.selectedIndex].text)">
<script type="text/javascript">
for(var i=0;i<yearArr.length;i++)
{
document.write("<option value="+ i +">"+ yearArr[i] +"</option>");
}
</script>
</select>
<script type="text/javascript">
var yearObj=document.getElementById("lw_select_year");
var yearSel=yearObj.options[yearObj.selectedIndex].text;
</script>
<select id="lw_select_month"
onchange="OnLoadDate(yearObj.options[yearObj.selectedIndex].text,this.options[this.selectedIndex].text)">
<script type="text/javascript">
for(var i=0;i<monthArr.length;i++)
{
document.write("<option value="+ i +">"+ monthArr[i] +"</option>");
}
</script>
</select>
<select id="lw_select_date">
</select>
<script type="text/javascript">
var monthObj=document.getElementById("lw_select_month");
var monthSel=monthObj.options[monthObj.selectedIndex].text;
if(monthSel != "2")
{
ShowNowDate(monthSel,"true");
}
else
{
ShowNowDate(monthSel,ShowDate(yearSel));
}
var html="";
var sel=document.getElementById("lw_select_date");
for(var i=0;i<dateArr.length;i++)
{
var options=new Option(dateArr[i],i);
sel.add(options,i+1);
}
</script>
</div>
</body>
</html>
