Question

我在IE中有三个选择出生日期（日，月，年）的问题。这是HTML。

<li><label for="dobYear">Date of birth*:</label>
<select name="dobDay" id="dobDay">
                     <option value="1">1</option>
                     <option value="2">2</option>
                     <option value="3">3</option>
                     <option value="4">4</option>
                     <option value="5">5</option>
                     <option value="6">6</option>
                     <option value="7">7</option>
                     <option value="8">8</option>
                     <option value="9">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>
                    <select name="dobMonth" id="dobMonth" onchange="getDays();">
                      <option value="01">Jan</option>
                      <option value="02">Fev</option>
                      <option value="03">Mar</option>
                      <option value="04">Apr</option>
                      <option value="05">May</option>
                      <option value="06">Jun</option>
                      <option value="07">Jul</option>
                      <option value="08">Aug</option>
                      <option value="09">Sep</option>
                      <option value="10">Oct</option>
                      <option value="11">Nov</option>
                      <option value="12">Dec</option>
                    </select>
                    <select name="dobYear" id="dobYear" onchange="getDays();">
                      <option value="2010">2010</option>
                      <option value="2009">2009</option>
                      <option value="2008">2008</option>
                      <option value="2007">2007</option>
                      <option value="2006">2006</option>
                      <option value="2005">2005</option>
                    </select>
</li>

我有一个javascript代码来计算每个月/每年的天数

function getDays()
{
var month = document.getElementById("dobMonth").options[document.getElementById("dobMonth").selectedIndex].value;
var year=document.getElementById("dobYear").options[document.getElementById("dobYear").selectedIndex].value;
var daysoutput;
    if (month == 1 || month == 3 || month == 5 || month == 7 || month == 8 || month == 10 || month == 12){
        var j = 31;
    }
     else if (month == 4 || month == 6 || month == 9 || month == 11){
          var j = 30;
    }
    else{
        if (year%4==0){
               j=29;
        }
else{
j=28;
}
}
for (var i=1;i<=j;i++){
daysoutput+='<option value="'+i+'">'+i+'</option>';
}
document.getElementById('dobDay').innerHTML=daysoutput;
}

使用FF，这没关系，但是在IE中选择一个月/年后，选择的日期变为空！

我不知道为什么？，但我怀疑问题出在innerHTML。

谢谢

Answer 1

添加选项的正确方法是使用下拉元素的options集合的.add（）方法。

工作示例：

window.onload = function WindowLoad() {
    var dtNow = new Date();
    var year = dtNow.getFullYear();
    FillDropDownRange("ddlMonth", 1, 12, dtNow.getMonth() + 1);
    FillDropDownRange("ddlYear", year - 5, year, year);
    FillDays();
};
    
function FillDropDownRange(oDDL, rangeStart, rangeEnd, nSelectedValue) {
    if (typeof oDDL == "string")
        oDDL = document.getElementById(oDDL);
    while (oDDL.options.length > 0)
        oDDL.removeChild(oDDL.options[0]);
    for (var i = rangeStart; i <= rangeEnd; i++) {
        var option = new Option();
        option.text = i + "";
        option.value = i + "";
        if (typeof nSelectedValue != "undefined" && i == nSelectedValue)
            option.selected = "selected";
        oDDL.options.add(option);
    }
}

function FillDays() {
    var month = parseInt(document.getElementById("ddlMonth").value);
    var year = parseInt(document.getElementById("ddlYear").value);
    var date = new Date();
    date.setDate(1);    
    date.setMonth(month - 1);
    date.setFullYear(year);
    var daysCount = 0;
    while (date.getMonth() == (month - 1)) {
        date.setDate(date.getDate() + 1);
        daysCount++;
    }
    FillDropDownRange("ddlDay", 1, daysCount);
}

<select id="ddlDay"></select> /
<select id="ddlMonth" onchange="FillDays();"></select> / 
<select id="ddlYear" onchange="FillDays();"></select>

我还给出了“安全”的方式来获得特定月份和年份的天数。

Answer 2

谢谢各位朋友，我已经解决了这个问题，而现在它已经成为了IE：

这是解决方案：

我更改了这一行：

<label for="dobYear">Date of birth*:</label><select name="dobDay" id="dobDay"> in the html code to this

到此;

<span id="days"><label for="dobYear">Date of birth*:</label>
                     <select name="dobDay" id="dobDay">

如您所见，我添加了一个容器（父）范围来选择

然后我按如下方式更改了js代码：

    for (var i=1;i<=j;i++){
daysoutput+='<option value="'+i+'">'+i+'</option>';
}
document.getElementById('dobDay').innerHTML=daysoutput;

成为：

for (var i=1;i<=j;i++){
daysoutput+='<option value="'+i+'">'+i+'</option>';
}
document.getElementById("days").innerHTML='<label for="dobYear">Date of birth*:</label><select name="dobDay" id="dobDay">'+daysoutput+'</select></label>';

可能看起来IE没有将innerHTML应用于select标签，然后我添加了一个包含此select的span标签，并使用javascript更改了它的innerHTML

谢谢

Answer 3

您无法使用Internet Explorer设置select元素的innerHTML。

您应该使用新的选项（）。

var sel = document.getElementById("mySelect");
sel.options.length = 0; //removes all options
for(var i=0;i<3;i++){
  var newOpt = new Option("text" + i, "value" + i);
  sel.options[i] = newOpt;
}

您也可以使用createElement而不是新选项。

Answer 4

我认为您应该尝试将您的选项值设置为string或parseInt进行比较。它可能会解决您的问题。例如：

if(month == 3)

到

if(month == "3")

或

if(parseInt(month) == 3)

在javascript中选择日期的问题

4 个答案: