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

Question

和我们很多人一样，我对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>

谢谢你的帮助。

Answer 1

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

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