appendChild in javascript repeats the value of dropdown

Question

I am developing my date dropdown picker. I have 3 dropdowns for selecting a year, month and day. I used javascript for that. The program runned when I choose a year then javascript will append months[1'2,3,4,5, and so on] in my month dropdown. As well as when I choose a month for example 2-->February, it will append 28 days only in my day dropdown. It works well but the problem is everytime I change to a new year, the value of my month dropdown is repeated as well as in days.

example:

     year dropdown --- I choose 1970
     month dropdown ----- [1,2,3,4,5,6,7,8,9,10,11,12]
     dates dropdown ----[1-31]

when I choose another year:

     year dropdown --- I choose 1972
     month dropdown ----- [1,2,3,4,5,6,7,8,9,10,11,12, 1,2,3,4,5,6,7,8,9,10,11,12]
     dates dropdown ----[1-31]

As you can see the value in my month dropdown repeat only.

my codes is below:

 
        function daysInMonth(m, y){
        return m===2?y&3||!(y%25)&&y&15?28:29:30+(m+(m>>3)&1);
     }
        
        var monthArray = [];
        var dateArray = []; 
        function onYearChange() {
         $(this).parent().remove();
         var year = document.getElementById("yeardialog").value
               if (document.getElementById("yeardialog").value != "0"){
                  for(var i = 1 ; i<=12; i++){
                      monthArray.push(i);
                      dateArray.push(daysInMonth(i, year));
                }

              var select = document.getElementById("monthdialog");
         for(var i = 0; i < monthArray.length; i++) {
            var monthOptions = monthArray[i];
            var el = document.createElement("option");
             el.textContent = monthOptions;
             el.value = monthOptions;
          select.appendChild(el);
        }
            }         
   }

function onMonthChange(){


   var dates =[]; 
   var month = document.getElementById("monthdialog").value;
   var endDay = dateArray[month-1];

   for(var date = 1; date<=endDay; date++){
    dates.push(date);
   }

          var select = document.getElementById("datedialog");
     for(var i = 0; i < dates.length; i++) {
        var dateOptions = dates[i];
        var el = document.createElement("option");
         el.textContent = dateOptions;
         el.value = dateOptions;
          select.appendChild(el);
     }
  }

  <select id="yeardialog" name="yeardialog" onchange="onYearChange()">
   <option value=""> -- </option>
      {for $i = 1970; $i <= 2015; $i++ }
       <option value={$i} >{$i}</option>
      {/for}
    </select>

    <select id="monthdialog" onchange="onMonthChange()">
      <option></option>
 </select>

  <select id="datedialog">
      <option></option>
  </select>

       <div id="message">
          
  </div>

Any help much appreciated. Thank you.

This code doesn't run for me. What template system are you using? I'm not sure if it's supported by stackoverflow, maybe you can put it on jsfiddle? — Bjorn, Jul 21 '15 at 02:54
I think your problem is probably solved by either only ever adding the months once or clearing the select out before adding them so you don't repeatedly add them. — Bjorn, Jul 21 '15 at 02:56
I used code igniter for that. I think the reason is that is why not working because I used php in yeardialog. — QWERTY, Jul 21 '15 at 02:56
you can just use one line like this before appending child like this document.getElementById("monthdialog").innerHTML = ""; — chiragchavda.ks, Jul 21 '15 at 03:00
[explanation of my `daysInMonth` algo here](http://stackoverflow.com/a/27810801/588079). — GitaarLAB, Dec 13 '15 at 18:49

Ajay Narain Mathur · Accepted Answer · 2015-07-21T03:06:14.157

Clear the month select box each time user changes year:

var select = document.getElementById("monthdialog");
select.innerHTML = "";     // <= Clear options like this and then add optons
 for(var i = 0; i < monthArray.length; i++) {
  var monthOptions = monthArray[i];
  var el = document.createElement("option");
  el.textContent = monthOptions;
  el.value = monthOptions;
  select.appendChild(el);
}

Snippet:

function onYearChange() {
  var select = document.getElementById('monthdialog');
  select.innerHTML = "";
  for (var i = 0; i < 12; i++) {
    var el = document.createElement("option");
    el.textContent = i;
    el.value = i;
    select.appendChild(el);
  }

}

<select id="yeardialog" name="yeardialog" onchange="onYearChange()">
  <option value="">--</option>
  <option value="1990">1990</option>
  <option value="1991">1991</option>
  <option value="1992">1992</option>

</select>
<select id="monthdialog" onchange="onMonthChange()">
  <option></option>
</select>

Okay. I will just implement that codes to mine. Thank u very much. — QWERTY, Jul 21 '15 at 03:19

appendChild in javascript repeats the value of dropdown

1 Answers1