javascript - 选择下拉菜单中的新选择时，将 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 类会覆盖它。我们可以明确地使用添加和删除而不是使用切换，因为我们知道在任何给定时间只有 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>