javascript onchange屬性

Question

我剛剛在我的頁面上有這個問題，這是... 我希望在用戶從這個選擇列表中選擇不同的選項時，選擇下拉列表的選項將被更改，我使用「onchange」財產，它只有第一次運作良好！但不是每次選擇的變化！這裏是我的代碼，

var SlctYear = document.getElementById("SlctYear"), 
 
    SlctMonth = document.getElementById("SlctMonth"), 
 
    SlctDay = document.getElementById("SlctDay"), 
 
    x, 
 
    option1, 
 
    option2, 
 
    option3; 
 

 
for (x = 2017; x >= 1960; x -= 1) { 
 
    option1 = document.createElement("option"); 
 
    SlctYear.appendChild(option1); 
 
    option1.textContent = x; 
 
    option1.setAttribute("value", "Val" + x); 
 
} 
 

 
for (x = 1; x <= 12; x += 1) { 
 
    option2 = document.createElement("option"); 
 
    SlctMonth.appendChild(option2); 
 
    option2.textContent = x; 
 
    option2.setAttribute("value", "Val" + x); 
 
} 
 

 
SlctMonth.onchange = function() { 
 
    "use strict"; 
 
    if (SlctMonth.options[0].selected || SlctMonth.options[2].selected || SlctMonth.options[4].selected || SlctMonth.options[6].selected || SlctMonth.options[7].selected || SlctMonth.options[9].selected || SlctMonth.options[11].selected === true) { 
 
    for (x = 31; x >= 1; x -= 1) { 
 
     option3 = document.createElement("option"); 
 
     SlctDay.appendChild(option3); 
 
     option3.textContent = x; 
 
    } 
 
    } else if (SlctMonth.options[1].selected === true) { 
 
    for (x = 28; x >= 1; x -= 1) { 
 
     option3 = document.createElement("option"); 
 
     SlctDay.appendChild(option3); 
 
     option3.textContent = x; 
 
    } 
 
    } else if (SlctMonth.options[3].selected || SlctMonth.options[5].selected || SlctMonth.options[8].selected || SlctMonth.options[10].selected) { 
 
    for (x = 30; x >= 1; x -= 1) { 
 
     option3 = document.createElement("option"); 
 
     SlctDay.appendChild(option3); 
 
     option3.textContent = x; 
 
    } 
 
    } 
 
};

<label>Year</label> 
 
<select id="SlctYear"></select> 
 
<br> 
 
<label>Month</label> 
 
<select id="SlctMonth"></select> 
 
<br> 
 
<label>Day</label> 
 
<select id="SlctDay"></select>

Answer 1

問題是，你不清除選項，你追加新的之前，就在你的函數如下補充循環：

SlctMonth.onchange = function() { 
      "use strict"; 
      //ADD THIS------------------------- 
      while (SlctDay.hasChildNodes()) { 
      SlctDay.removeChild(SlctDay.lastChild); 
      } 
      //-------------------------------- 
      if (SlctMonth.options[0].selected || SlctMonth.options[2].selected || SlctMonth.options[4].selected || SlctMonth.options[6].selected || SlctMonth.options[7].selected || SlctMonth.options[9].selected || SlctMonth.options[11].selected === true) { 
      for (x = 31; x >= 1; x -= 1) { 
       option3 = document.createElement("option"); 
       SlctDay.appendChild(option3); 
       option3.textContent = x; 
      } 
      } else if (SlctMonth.options[1].selected === true) { 
      for (x = 28; x >= 1; x -= 1) { 
       option3 = document.createElement("option"); 
       SlctDay.appendChild(option3); 
       option3.textContent = x; 
      } 
      } else if (SlctMonth.options[3].selected || SlctMonth.options[5].selected || SlctMonth.options[8].selected || SlctMonth.options[10].selected) { 
      for (x = 30; x >= 1; x -= 1) { 
       option3 = document.createElement("option"); 
       SlctDay.appendChild(option3); 
       option3.textContent = x; 
      } 
      } 
     };