jquery - appendChild in javascript repeats the value of dropdown -

i developing date dropdown picker. have 3 dropdowns selecting year, month , day. used javascript that. program runned when choose year javascript append months[1'2,3,4,5, , on] in month dropdown. when choose month example 2-->february, append 28 days in day dropdown. works problem everytime change new year, value of month dropdown repeated in days.

example:

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

when choose year:

     year dropdown --- 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 can see value in month dropdown repeat only.

my codes 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 = 1 ; i<=12; i++){                        montharray.push(i);                        datearray.push(daysinmonth(i, year));                  }                  var select = document.getelementbyid("monthdialog");  			      for(var = 0; < 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 = 0; < 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 appreciated. thank you.

clear month select box each time user changes year:

var select = document.getelementbyid("monthdialog"); select.innerhtml = "";     // <= clear options , add optons  for(var = 0; < 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 = "";    (var = 0; < 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>