Problème avec un jour sélectionner en javascript

Question

J'ai un problème avec trois sélections pour la date de naissance (jour, mois, année) dans IE. C'est le 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> 

et j'ai un code javascript pour compter le nombre de jours de chaque mois/année

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

avec FF, cela est correct, mais dans IE au lieu après avoir sélectionné un mois/année, les jours sélectionnez devient vide!

et je ne sais pas pourquoi? , mais je doute que le problème est avec innerHTML.

merci

Answer 1

La bonne façon d'ajouter des options est la méthode .add() de la collection options de la liste déroulante élément.

Exemple de travail:

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>

Je donne aussi une manière "sûre" pour obtenir le nombre de jours donnés mois et de l'année.

Answer 2

je pense que vous devriez essayer de le cas où votre valeur d'option de chaîne ou parseInt à comparer. Cela pourrait résoudre votre problème. Par exemple:

if(month == 3) 

à

if(month == "3") 

ou

if(parseInt(month) == 3) 

Answer 3

Merci amis, je l'ai résolu le problème et il est maintenant Okey avec IE:

c'est la solution:

j'ai changé cette ligne:

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

à cela;

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

comme vous pouvez le voir, j'ai ajouté une durée conteneur (parent) pour sélectionner

puis j'ai changé le code de js comme suit:

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

devient:

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

il peut sembler que IE n'applique pas innerHTML à une balise select, alors j'ai ajouté une balise span qui contient cette sélection, et a changé son innerHTML avec javascript

merci

Answer 4

Vous ne pouvez pas définir l'innerHTML d'un élément de sélection avec Internet Explorer.

Vous devez utiliser une nouvelle 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; 
} 

Vous pouvez également utiliser createElement au lieu de new Option.