在下拉菜單中選擇新選項后，將CSS類還原為原始類

Question

我有一個下拉菜單，根據第一個選擇觸發一個不同的菜單集。 然后基於下一個選擇，我想顯示一個包含信息的div。 如果第二個選擇更改，我想隱藏顯示的內容並為新選擇顯示新內容。 我遇到的問題是，做出新選擇時，舊內容不會隱藏，而新內容只會添加到其中。

我不了解jquery，所以我正在使用javascript，並且嘗試使用.classlist.remove和.add根據div ID更改類名稱。 我也嘗試過創建循環來檢查類名是否存在，並將其更改為其他類名。

 function populate(s1, s2) { var s1 = document.getElementById(s1); var s2 = document.getElementById(s2); s2.innerHTML = ""; if (s1.value == "Auto") { var optionArray = ["|Please Select The Insurance Company", "nationwideauto|Nationwide", "progressiveauto|Progressive", "safeco|Safeco"]; } else if (s1.value == "Home") { var optionArray = ["|Please Select The Insurance Company", "cabrillo|Cabrillo", "gulfstream|Gulfstream", "capitalpreferred|Capital Preferred"]; } else if (s1.value == "Commercial") { var optionArray = ["|Please Select The Insurance Company", "bankers|Bankers", "travelers|Travelers", "progressive|Progressive"]; } for (var option in optionArray) { var pair = optionArray[option].split("|"); var newOption = document.createElement("option"); newOption.value = pair[0]; newOption.innerHTML = pair[1]; s2.options.add(newOption); } } function toggle() { var element = document.getElementById('slct2').value; document.getElementById(element).classList.remove('inv'); document.getElementById(element).classList.add('vis'); } 

  .inv { display: none; } .vis { display: block; } 

 <select id="slct1" name="slct1" onchange="populate(this.id, 'slct2')"> <option value "">Please Select The Type of Claim</option> <option value="Auto">Auto Insurance Claim</option> <option value="Home">Property Insurance Claim</option> <option value="Commercial">Commercial Insurance Claim</option> </select> <select id="slct2" name="slct2" onchange="toggle(this.id)"></select> <div id="nationwideauto" class="inv">Content 1</div> <div id="progressiveauto" class="inv">Content 2</div> <div id="safeco" class="inv">Content 3</div> 

我僅創建了前幾個div來測試代碼，預期的結果是在第一個下拉列表中選擇“自動”，然后在第二個下拉列表中顯示汽車保險公司（有效）。 然后，當您從第二個下拉列表中選擇一家公司時，它將在div中顯示內容（有效）。 我遇到的問題是，在下拉列表2中做出新選擇時，我無法弄清楚如何隱藏具有原始內容的div並顯示具有新內容的div。 我的函數toggle（）就是問題，我已經連續三天閱讀和搜索，無法找到有效的解決方案。

Answer 1

您可以從所有元素中刪除vis類，然后將其應用於所選元素。 不需要刪除inv類，因為vis類將覆蓋它。 我們可以顯式地使用add和remove來代替使用切換，因為我們知道在任何給定時間只有0或1項具有該類：

 function populate(s1, s2) { var s1 = document.getElementById(s1); var s2 = document.getElementById(s2); s2.innerHTML = ""; if (s1.value == "Auto") { var optionArray = ["|Please Select The Insurance Company", "nationwideauto|Nationwide", "progressiveauto|Progressive", "safeco|Safeco"]; } else if (s1.value == "Home") { var optionArray = ["|Please Select The Insurance Company", "cabrillo|Cabrillo", "gulfstream|Gulfstream", "capitalpreferred|Capital Preferred"]; } else if (s1.value == "Commercial") { var optionArray = ["|Please Select The Insurance Company", "bankers|Bankers", "travelers|Travelers", "progressive|Progressive"]; } for (var option in optionArray) { var pair = optionArray[option].split("|"); var newOption = document.createElement("option"); newOption.value = pair[0]; newOption.innerHTML = pair[1]; s2.options.add(newOption); } } function toggle() { var element = document.getElementById('slct2').value; var selected = document.getElementById(element) const vis = document.getElementsByClassName('vis') vis.length && vis[0].classList.remove('vis') selected.classList.add('vis') } 

 .inv { display: none; } .vis { display: block; } 

 <select id="slct1" name="slct1" onchange="populate(this.id, 'slct2')"> <option value "">Please Select The Type of Claim</option> <option value="Auto">Auto Insurance Claim</option> <option value="Home">Property Insurance Claim</option> <option value="Commercial">Commercial Insurance Claim</option> </select> <select id="slct2" name="slct2" onchange="toggle(this.id)"></select> <div id="nationwideauto" class="inv">Content 1</div> <div id="progressiveauto" class="inv">Content 2</div> <div id="safeco" class="inv">Content 3</div>