How to hide/show multiple divs using a dropdown with javascript

Question

as many of us I'm really new to JS and I'm trying to create sort of a filter to select diferent people from different cities and based on their carreer. So im trying to create two dropdown menus with a selector to achieve this. Here is my noob code for it.

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>

Thanks for the help.

how can I achieve it. Here is an example https://www.parsleyhealth.com/doctors/#doctors — Victor Hugo Zavala, Jul 07 '21 at 18:47
Does this answer your question? [querySelectorAll with multiple conditions](https://stackoverflow.com/questions/34001917/queryselectorall-with-multiple-conditions) — Heretic Monkey, Jul 07 '21 at 19:15

Kinglish · Answer 1 · 2021-07-07T18:57:05.783

2

document.querySelectorAll can aggregate multiple classes, but they need to be together, comma separated like you would in CSS. That returns an HTML collection, which you can iterate through like an array using forEach

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

edited Jul 07 '21 at 18:57

answered Jul 07 '21 at 18:48

Kinglish

23,358
3
22
43

How to hide/show multiple divs using a dropdown with javascript

1 Answers1