html+js动态显示3个select标签 -CSDN博客

本文链接：https://blog.csdn.net/jimodushi/article/details/2799927
以下是用HTML+JS针对select标签做的操作。
判断闰年和平年下2月的天数，也判断大也和小月的天数，并动态显示出来。（代码有些地方还不够简洁！）
在做的时候碰到了一个问题，在动态往select标签里添加内容的时候，用document.write添加时可以显示，但用document.getElementById("select标签ID").innerHTML添加时就不行了，原来innerHTML对select标签不起作用。
经过在网上搜索，找到了解决办法。
 
 <!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>
 