javascript中的appendChild重复下拉列表的值

Question

我正在开发我的日期下拉选择器。我有 3 个下拉菜单用于选择年、月和日。我为此使用了javascript。当我选择一年时运行的程序然后javascript将在我的月份下拉列表中附加月份[1'2,3,4,5，依此类推]。以及当我选择一个月（例如 2--> 二月）时，它只会在我的日期下拉列表中附加 28 天。它运作良好，但问题是每次我更改为新的一年时，我的月份下拉列表的值都会重复以及以天为单位。

示例：

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

当我选择另一年时：

     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]

如您所见，我的月份下拉列表中的值仅重复。

我的代码如下：

 
        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>

非常感谢任何帮助。谢谢你。

Answer 1

每次用户更改年份时清除月份选择框：

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

片段：

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>