时间戳

首页 > 解决方案 > 如何使用带有 javascript 的下拉菜单隐藏/显示多个 div

javascript - 如何使用带有 javascript 的下拉菜单隐藏/显示多个 div

问题描述

正如我们中的许多人一样，我对 JS 真的很陌生，我正在尝试创建一种过滤器来选择来自不同城市并根据他们的职业选择不同的人。所以我试图用一个选择器创建两个下拉菜单来实现这一点。这是我的菜鸟代码。

window.onload = function() {

  var atencion = document.getElementById("working_place");
  var especialidad = document.getElementById("area");
 
  if (atencion === "remote" && especialidad === "medic") {
    document.querySelectorAll(".santiago",".concepcion" ".psique" ".nutri" ".trainer").style.display = "none";
  }
 };
<div>
  <div>
    Know all the team <select id="working_place">
      <option value="all">All the team</option>
      <option value="remote">Remote</option>
      <option value="santiago">Santiago</option>
      <option value="concepcion">Concepción</option>
    </select><select name="especialidad" id="area">
      <option value="medic">Doctor</option>
      <option value="psique">Psique</option>
      <option value="nutri">Nutricionist</option>
      <option value="psico">Psicologyst / Life Coach</option>
      <option value="trainer">Personal Trainer</option>
    </select>
  </div>
</div>
<h1>Specialist</h1>
<div class="medic santiago">Doctor</div>
<div class="psique santiago">Psique</div>
<div class="nutri remote">Nutricionist</div>
<div class="trainer concepcion">Personal Trainer</div>

谢谢您的帮助。

标签： javascripthtmlselectdropdown

解决方案

document.querySelectorAll可以聚合多个类，但它们需要放在一起，用逗号分隔，就像在 CSS 中一样。这将返回一个 HTML 集合，您可以像使用数组一样对其进行迭代forEach

if (atencion === "remote" && especialidad === "medic") {
  document.querySelectorAll(".santiago, .concepcion, .psique, .nutri, .trainer").forEach(el => el.style.display = "none");
}

推荐阅读