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>

在下拉菜单中选择新选项后，将CSS类恢复为原始版本

1 个答案: