JavaScript 无刷新 联动 日期

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>JK:支持民族工业,尽量少买X货</title>
<script language=javascript>
function changeDays()
{
  var theMonthDays=(new Date(document.frm.year.value,document.frm.month.value*1+1,0)).getDate(); //得到该月份的天数
  var dayObj=document.frm.day;
  if(dayObj.value>theMonthDays)
    dayObj.value=theMonthDays;   //如果日期过大，则选择最大可能日期
  for(var i=dayObj.length+1;i<=theMonthDays;i++)  //加上不足的天option
  {
    var newOption=document.createElement("option");
    dayObj.appendChild(newOption);  
    newOption.value=i;  
    newOption.text=i;  
  }
  dayObj.length=theMonthDays;  //删除多余的天
}
</script>
</head><body onload="changeDays();">
<div style="font-size:10pt;">
注1：年月日下拉选择 <br/>           
       <br/>    
注：本页面仅在IE6/Firefox1.5下测试过。其它浏览器或其它版本未经测试。<br/>           
注-----：JK：<a href="mailTo:[email protected]?subject=YearMonthDaySelect">[email protected]</a><br/>        
<hr/>    
</div><form name=frm action="" method=get>
年月日选择框:<br>
<select name=year onchange="changeDays()" >
  <option value=2000>2000<option value=2001>2001<option value=2002>2002<option value=2003 selected >2003
</select>
<select name=month onchange="changeDays()">      
  <option value=0>1<option value=1>2<option value=2 selected >3<option value=3>4<option value=3>5<option value=3>6
  <option value=3>7<option value=3>8<option value=3>9<option value=3>10<option value=3>11<option value=11>12
</select>
<select name=day >      
  <option value=1>1
  <option value=2>2
  <option value=3>3
  <option value=4>4
  <option value=5>5
  <option value=6>6
  <option value=7>7
  <option value=8>8
  <option value=9>9
  <option value=10 selected >10
  <option value=11>11
  <option value=12>12
  <option value=13>13
  <option value=14>14
  <option value=15>15
  <option value=16>16
  <option value=17>17
  <option value=18>18
  <option value=19>19
  <option value=20>20
  <option value=21>21
  <option value=22>22
  <option value=23>23
  <option value=24>24
  <option value=25>25
  <option value=26>26
  <option value=27>27
  <option value=28>28
  <option value=29>29
  <option value=30>30
  <option value=31>31
</select><br>
<hr>
注：后退到本页面时，下拉框的内容会保持旧有内容<br>
<a href="about:blank">about:blank</a><br>
</form>
</body></html>

解决方案 »

  1.   

    javascript:
    function YYYYMMDDstart() 
    { 
         MonHead = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];      for (var i = 1900; i <=2003; i++)  
             document.form1.YYYY.options.add(new Option(" "+ i +" 年", i));      //赋月份的下拉框 
        for (var i = 1; i < 13; i++) 
            document.form1.MM.options.add(new Option(" " + i + " 月", i)); 
            
         var n = MonHead[new Date().getMonth()]; 
         if (new Date().getMonth() ==1 && IsPinYear(YYYYvalue)) 
         n++; 
            writeDay(n); //赋日期下拉框 
    } 

    if(document.attachEvent) 
      window.attachEvent("onload", YYYYMMDDstart); 
    else 
      window.addEventListener('load', YYYYMMDDstart, false); 

    function YYYYDD(str) //年发生变化时日期发生变化(主要是判断闰平年) 
    { 
        var MMvalue = document.form1.MM.options[document.form1.MM.selectedIndex].value; 
        if (MMvalue == ""){ 
         var e = document.form1.DD; 
         optionsClear(e); 
         return;
        } 
        var n = MonHead[MMvalue - 1]; 
        if (MMvalue ==2 && IsPinYear(str)) 
         n++; 
        writeDay(n) 
    } 

    function MMDD(str)  //月发生变化时日期联动 
    { 
        var YYYYvalue = document.form1.YYYY.options[document.form1.YYYY.selectedIndex].value; 
        if (YYYYvalue == ""){ 
         var e = document.form1.DD; 
         optionsClear(e); 
         return;
        } 
        var n = MonHead[str - 1]; 
        if (str ==2 && IsPinYear(YYYYvalue)) 
         n++; 
        writeDay(n) 
    } 

    function writeDay(n)  //据条件写日期的下拉框 
    { 
        var e = document.form1.DD; 
        optionsClear(e); 
        for (var i=1; i<(n+1); i++) 
            e.options.add(new Option(" "+ i + " 日", i)); 
    } 

    function IsPinYear(year)//判断是否闰平年 
    {   return(0 == year%4 && (year%100 !=0 || year%400 == 0));} 

    function optionsClear(e) 
    { 
        e.options.length = 1; 
    }html:                        <tr height="100pt">
    <td>出生日期：</td>
    <td width="50pt">
    <select name=YYYY onchange="YYYYDD(this.value)"> 
         <option value="">选择年</option> 
       </select>
       </td>
       <td width="150pt"> 
       <select name=MM onchange="MMDD(this.value)"> 
         <option value="">选择月</option> 
       </select>
       </td>
       <td width="150pt"> 
       <select name=DD> 
         <option value="">选择日</option> 
       </select>
       </td> 
    </tr>版主为什么删我的回复？毛病
      

  2.   

    To gesanri :
    对不起，看走眼了，以为是我发的贴发重复了，所以就删掉了，没看清发贴人不是我自已。
    再次致歉。
      

  3.   

    这个select里的option写错了。
    <select name=month onchange="changeDays()">      
      <option value=0>1 <option value=1>2 <option value=2 selected >3 <option value=3>4 <option value=4>5 <option value=5>6 
      <option value=6>7 <option value=7>8 <option value=8>9 <option value=9>10 <option value=10>11 <option value=11>12 
    </select> 
      

  4.   

    谢谢 JK 谢谢gesanri！TO JK: 修改后的代码可以正常使用了，但是需要在页面中为年月日SELECT手动赋初始值。我想使用gesanri方法中的JS给页面赋初始值的方法，但是TO gesanri： 为什么初始化页面时，年月日下拉列表得到的都是空值呢，只有“请选择...”。