CODEWITHSUNDEEP
javascriptjquery
QWERTY
QWERTY

Reputation: 263

appendChild in javascript repeats the value of dropdown

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.

Upvotes: 0

Views: 788

Answers (1)

Ajay Narain Mathur
Ajay Narain Mathur

Reputation: 5466

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>

Upvotes: 1

Related Questions