Проблема с днями выберите в JavaScript

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

Правильный способ добавить опции - это использовать метод .add () коллекции options раскрывающегося элемента.

Рабочий пример:

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

Вы не можете установить innerHTML выбранного элемента с помощью Internet Explorer.

Вы должны использовать новый 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;
}

Вы также можете использовать createElement вместо нового Option.

Answer 3

Спасибо, друзья, я решил проблему, и теперь все в порядке с 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">

Как видите, я добавил контейнер (родительский) span для выбора

затем я изменил код 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, затем я добавил тег span, содержащий этот выбор, и изменил его innerHTML с помощью javascript

спасибо

Answer 4

Я думаю, вы должны попытаться преобразовать значение вашего параметра в строку или parseInt для сравнения.Это может решить вашу проблему.Например:

if(month == 3)

до

if(month == "3")

или

if(parseInt(month) == 3)