我正在学习写网站其中网站的一个地方需要浏览网站的人在select里面选择日期并提交。而日期的每个月是不一样的。当我选择了不同的year和month的时候,显示day的select有不同的长度可是我写的代码,只能变短,不能变长。我选择了一月,day里面有三十一个选项,选择二月,day变成28个选项,再选择其他的一个月多于28天的月份,day里面还是28个选项请问我哪里错了。<!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=utf-8" />
<title>无标题文档</title>
</head><body>
<script>
function monthday(){
var m = document.getElementById("month");
var mm = m.options[m.selectedIndex].value;
var l =document.getElementById("day").options.length;
var oOptions1 = document.createElement("OPTIONS");
oOptions1.innerText = "29";
oOptions1.value = "29"; 
var oOptions2 = document.createElement("OPTIONS");
oOptions2.innerText = "30";
oOptions2.value = "30";
var oOptions3 = document.createElement("OPTIONS");
oOptions3.innerText = "31";
oOptions3.value = "31";
if(mm == "02"){
var y = document.getElementById("year");
var yy = y.options[y.selectedIndex].value;
 if(yy == "2016"){
 if(document.getElementById("day").options.length >= 29){

 document.getElementById("day").remove(30);
 document.getElementById("day").remove(29);
 }
 else{
 document.getElementById("day").options.add(oOptiongs1);
 }
 }
 else
 {
 document.getElementById("day").remove(30);
 document.getElementById("day").remove(29);
 document.getElementById("day").remove(28);
 }
}
else{
if(mm == "04"||m == "06"||m == "09"||m == "11"){
if(document.getElementById("day").options.length >= 30){
document.getElementById("day").remove(30);
}
else{
if(document.getElementById("day").options.length =28){
document.getElementById("day").options.add(oOptions1);
document.getElementById("day").options.add(oOptions2);
}
else
document.getElementById("day").options.add(oOptions2);
}
}
else{
switch(l){

case "28":document.getElementById("day").options.add(oOptions1);
case "29":document.getElementById("day").options.add(oOptions2);
case "30":document.getElementById("day").options.add(oOptions3);
}
}
}
}
</script>
<form method="post" action="/DoAddVisitor/">
     访客姓名:<input type="text" maxlength="15" id="visitorname" name="visitorname" /><br/>
        所属单位:<input type="text" maxlength="15" id="afiliation" name="afiliation"  /><br/>
        受访人&nbsp;&nbsp;:<input type="text" maxlength="15" id="visitedname" name="visitedname" /><br/>
        来访事宜:<textarea rows="5"></textarea><br/>
        来访时间:<select name="year" id="year" onchange="monthday()">
         <option value="2013">2013</option>
                    <option value="2014">2014</option>
                    <option value="2015">2015</option>
                    <option value="2016">2016</option>
                    <option value="2017">2017</option>
                    <option value="2018">2018</option>
                    <option value="2019">2019</option>
                    </select>年&nbsp;
                    <select name="month" id="month" onchange="monthday()">
         <option value="01">1</option>
                    <option value="02">2</option>
                    <option value="03">3</option>
                    <option value="04">4</option>
                    <option value="05">5</option>
                    <option value="06">6</option>
                    <option value="07">7</option>
                    <option value="08">8</option>
                    <option value="09">9</option>
                    <option value="10">10</option>
                    <option value="11">11</option>
                    <option value="12">12</option>
                    </select>月&nbsp;
                    <select name="day" id="day">
                    <option value="01">1</option>
                    <option value="02">2</option>
                    <option value="03">3</option>
                    <option value="04">4</option>
                    <option value="05">5</option>
                    <option value="06">6</option>
                    <option value="07">7</option>
                    <option value="08">8</option>
                    <option value="09">9</option>
                    <option value="10">10</option>
                    <option value="11">11</option>
                    <option value="12">12</option>
                    <option value="13">13</option>
                    <option value="14">14</option>
                    <option value="15">15</option>
                    <option value="16">16</option>
                    <option value="17">17</option>
                    <option value="18">18</option>
                    <option value="19">19</option>
                    <option value="20">20</option>
                    <option value="21">21</option>
                    <option value="22">22</option>
                    <option value="23">23</option>
                    <option value="24">24</option>
                    <option value="25">25</option>
                    <option value="26">26</option>
                    <option value="27">27</option>
                    <option value="28">28</option>
                    <option value="29">29</option>
                    <option value="30">30</option>
                    <option value="31">31</option>
                    </select>日<br/>
    </form>
</body>
</html>JavaScriptselect增删HTML

解决方案 »

  1.   

      document.getElementById("day").options.add(oOptions1);
     都改成   options.add(new Option(29,29)); 这样写 
      

  2.   

    你的代码看得头晕。。<!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=utf-8" />
    <title>无标题文档</title>
    </head>
     
    <body>
        <script>
        function monthday(){
    var year=parseInt(document.getElementById('year').value),month=parseInt(document.getElementById('month').value,10),day=document.getElementById('day'),iDay;
    var ruinian=year%4 ==0;
    day.options.length=28;
    if(month==2)iDay=ruinian?29:28;
    else if(month>7)iDay=month%2?30:31;
    else iDay=month%2?31:30; for(var i=29;i<=iDay;i++)day.options.add(new Option(i,i));
        }
        window.onload=monthday
    </script>
    <form method="post" action="/DoAddVisitor/">
            访客姓名:<input type="text" maxlength="15" id="visitorname" name="visitorname" /><br/>
            所属单位:<input type="text" maxlength="15" id="afiliation" name="afiliation"  /><br/>
            受访人&nbsp;&nbsp;:<input type="text" maxlength="15" id="visitedname" name="visitedname" /><br/>
            来访事宜:<textarea rows="5"></textarea><br/>
            来访时间:<select name="year" id="year" onchange="monthday()">
                        <option value="2013">2013</option>
                        <option value="2014">2014</option>
                        <option value="2015">2015</option>
                        <option value="2016">2016</option>
                        <option value="2017">2017</option>
                        <option value="2018">2018</option>
                        <option value="2019">2019</option>
                        </select>年&nbsp;
                        <select name="month" id="month" onchange="monthday()">
                        <option value="01">1</option>
                        <option value="02">2</option>
                        <option value="03">3</option>
                        <option value="04">4</option>
                        <option value="05">5</option>
                        <option value="06">6</option>
                        <option value="07">7</option>
                        <option value="08">8</option>
                        <option value="09">9</option>
                        <option value="10">10</option>
                        <option value="11">11</option>
                        <option value="12">12</option>
                        </select>月&nbsp;
                        <select name="day" id="day">
    <option value="01">1</option>
                        <option value="02">2</option>
                        <option value="03">3</option>
                        <option value="04">4</option>
                        <option value="05">5</option>
                        <option value="06">6</option>
                        <option value="07">7</option>
                        <option value="08">8</option>
                        <option value="09">9</option>
                        <option value="10">10</option>
                        <option value="11">11</option>
                        <option value="12">12</option>
                        <option value="13">13</option>
                        <option value="14">14</option>
                        <option value="15">15</option>
                        <option value="16">16</option>
                        <option value="17">17</option>
                        <option value="18">18</option>
                        <option value="19">19</option>
                        <option value="20">20</option>
                        <option value="21">21</option>
                        <option value="22">22</option>
                        <option value="23">23</option>
                        <option value="24">24</option>
                        <option value="25">25</option>
                        <option value="26">26</option>
                        <option value="27">27</option>
                        <option value="28">28</option>
                        <option value="29">29</option>
                        <option value="30">30</option>
                        <option value="31">31</option></select>日<br/>
        </form>
    </body>
    </html>
      

  3.   

    var oOptions1 = document.createElement("OPTIONS");
    oOptions1.innerText = "29";
    oOptions1.value = "29"; 
    var oOptions2 = document.createElement("OPTIONS");
    oOptions2.innerText = "30";
    oOptions2.value = "30";
    var oOptions3 = document.createElement("OPTIONS");
    oOptions3.innerText = "31";
    oOptions3.value = "31";===>
    var oOptions1 =new Option("29","29"); 
    var oOptions2 =new Option("30","30"); 
    var oOptions3 =new Option("31","31"); /////////////////////////////////////////////////////        case "28":document.getElementById("day").options.add(oOptions1);
    case "29":document.getElementById("day").options.add(oOptions2);
    case "30":document.getElementById("day").options.add(oOptions3);===>        case 28:document.getElementById("day").options.add(oOptions1);

            case 29:document.getElementById("day").options.add(oOptions2);

            case 30:document.getElementById("day").options.add(oOptions3);