在下拉菜单中选择新选项后，将 CSS class 恢复为原始状态

Question

我有一个下拉菜单，它会根据第一个 selection 触发一组不同的菜单。然后基于下一个 selection 我想显示一个 div 里面有信息。如果第二个 selection 发生变化，我想隐藏显示的内容并显示新 selection 的新内容。我遇到的问题是当新的 selection 制作时，旧内容不会隐藏，新内容只是添加到它上面。

我不明白 jquery 所以我正在使用 javascript 并且我尝试使用 .[=28= 根据 div ID 更改 class 名称] 和.add。我还尝试创建循环来检查 class 名称是否存在并将其更改为不同的 class 名称。

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 来测试代码，预期的结果是当您 select "Auto" 在第一个下拉列表中然后汽车保险公司显示在第二个下拉菜单（有效）。然后，当您从第二个下拉列表 select 一家公司时，它会在 div 中显示内容（有效）。我遇到的问题是，当在下拉列表 2 中创建一个新的 selection 时，我不知道如何用原始内容隐藏 div 并用新内容显示 div。我的函数 toggle() 是问题所在，我已经连续阅读和搜索了三天，但未能找到有效的解决方案。

Answer 1

您可以从所有元素中删除 vis class，然后将其应用于所选元素。无需删除 inv class，因为 vis class 会覆盖它。我们可以明确地使用添加和删除而不是使用切换，因为我们知道在任何给定时间只有 0 或 1 个项目将具有 class：

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>

在下拉菜单中选择新选项后，将 CSS class 恢复为原始状态

Revert a CSS class back to original when new selection in dropdown menu is chosen

html

javascript

css

onchange