Problem with a days select in javascript

I've a problem with three selects for birth of date (Day,Month,Year) in IE. This is the 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>

and I have a javascript code to count number of days in every month/year

function getDays()
{
var month = document.getElementById("dobMonth").options[document.getEl开发者_C百科ementById("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;
}

with FF, this is okay, but in IE instead after selecting a month/year , the days select becomes empty!

and I don't know why? ,but I doubt the problem is with innerHTML.

thank you

The proper way to add options is using the .add() method of the options collection of the drop down element.

Working example:

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>

I also gave "safe" way to get the number of days given specific month and year.

Thank you friends , I've solved the problem and it's now okey with IE:

this is the solution:

I changed this line :

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

to this ;

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

as you can see , I've added a container (parent) span to select

then I changed the js code as follows:

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

becomes :

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>';

it may appear that IE doesn't apply the innerHTML to a select tag, then I've added a span tag that contains this select , and changed its innerHTML with javascript

thank you

You can not set the innerHTML of a select element with Internet Explorer.

You should be using new Option().

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;
}

You could also use createElement instead of new Option.

I think you should try to case your option value to string or parseInt to compare. It might fixed your problem. For instance:

if(month == 3)

to

if(month == "3")

or

if(parseInt(month) == 3)