如何显示选择下拉菜单取决于先前的选择？答案

【问题标题】：how to display select dropdown depend on previous select?如何显示选择下拉菜单取决于先前的选择？
【发布时间】：2021-08-12 05:29:12
【问题描述】：

如果第一个选择是“教授”并且如果选择是“学生”不显示第二个下拉列表，我想显示第二个选择。 html:

function privilegija() {
  privilegija = document.getElementById("permisija5")
  predmeti = document.getElementById("predmeti")
  if (privilegija === "Student") {
    predmeti.display = "none"
  } else if (privilegija === "Professor") {
    predmeti.display = "block"
  }
}

<label for="permisija">Privilegija</label>
<select class="permisija" id="permisija5" name="permisija5" required>
  <option>Professor</option>
  <option>Student</option>
</select>
<br>
<br>
<div id="predmeti">
  <select name="predmet">
    <option>Matematika</option>
    <option>Engleski</option>
    <option>Programiranje</option>
    <option>Operativni sistemi</option>
  </select>
</div>

【问题讨论】：

标签： javascript html function select drop-down-menu

【解决方案1】：

您必须访问下拉菜单的实际值。目前，您正在将下拉元素与字符串进行比较，该字符串始终为 false。

if (privilegija.value === "Student") {
    predmeti.display = "none"
} else if (privilegija.value === "Professor") {
    predmeti.display = "" // No value needed, will return to default
}

（这当然是假设你确实调用了你的函数，如果这也是一个问题，请查看其他答案）

【讨论】：

【解决方案2】：

您没有调用您的函数 - 我不建议在 onchange 中内联调用它
您没有比较选择的value

我会使用 eventListeners 和一个类

注意：您可以从一开始就隐藏 div 或在加载时切换

window.addEventListener("load", function() { // when the elements on the page has loaded
  const predmeti = document.getElementById("predmeti");
  const permisija = document.getElementById("permisija5");
  const toggle = () => predmeti.classList.toggle("hide", permisija.value === "Student");
  permisija.addEventListener("change", toggle);
  toggle(); // when the page loads
});

.hide {
  display: none;
}

<label for="permisija">Privilegija</label>
<select class="permisija" id="permisija5" name="permisija5" required>
  <option>Professor</option>
  <option selected>Student</option>
</select>
<br>
<br>
<div id="predmeti" class="hide">
  <select name="predmet">
    <option>Matematika</option>
    <option>Engleski</option>
    <option>Programiranje</option>
    <option>Operativni sistemi</option>
  </select>
</div>

【讨论】：

【解决方案3】：

使用您开始的代码，您可以通过添加更改处理程序在用户选择某些内容时触发您的函数：

<select class="permisija" id="permisija5" name="permisija5" onchange="privilegija()" required>

然后，对您的函数进行一些更改，以便您获得正确的值并设置正确的 css

function privilegija() {
  privilegija = document.getElementById("permisija5")
  predmeti = document.getElementById("predmeti")
  if (privilegija.value === "Student") {
    predmeti.style.display = "none"
  } else if (privilegija.value === "Professor") {
    predmeti.style.display = "block"
  }
}

【讨论】：

【解决方案4】：

这考虑到是否在加载时不进行选择

window.addEventListener('load', (event) => {

privilegija = document.getElementById("permisija5")
predmeti = document.getElementById("predmeti");

show(); // show or hide on page load

function show() {
if (privilegija.value === "Student") {
    predmeti.style.display = "none"
  } else if (privilegija.value === "Professor") {
    predmeti.style.display = "block"
  }
  }


privilegija.addEventListener("change", () => {
  show(); // show or hide on select change
})
});

<label for="permisija">Privilegija</label>
<select  class="permisija"  id="permisija5" name="permisija5" required>
<option>Professor</option>
<option>Student</option>

  
  
</select>
<br>
<br>
<div id="predmeti" style="display: none">
  <select name="predmet">
    <option>Matematika</option>
    <option>Engleski</option>
    <option>Programiranje</option>
    <option>Operativni sistemi</option>
  </select>
</div>

【讨论】：