title: Multiple select tags to filter list in pure JavaScript
body: <p>I am using an onchange function for my select tag to filter a list of items based on the select option value.</p>
  
  <p>The code I have currently have only works for a single select tag but I want it to be able to work for multiple select tags, which would require each select option value to cooperate.</p>
  
  <p>For example, if I have "Departments" and "Locations" as tags for each item in the list and I choose Department -> IT and Location -> New York in the select tags, I only want to see a list of <strong>IT departments in New York</strong>.</p>
  
  <p>I am having a hard time understanding how I would do this properly. I would assume some sort of for loop to get each select tag and then get the value of the current option in each select tag and only show the list items if they meet the select option value criteria.</p>
  
  <p>I would appreciate any help of how I could achieve this!</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;select class="filterTags" id="filterDepartment"&gt;
      &lt;option&gt;All&lt;/option&gt;
      &lt;option&gt;IT&lt;/option&gt;
      &lt;option&gt;Marketing&lt;/option&gt;
  &lt;/select&gt;
  
  &lt;select class="filterTags" id="filterLocation"&gt;
      &lt;option&gt;All&lt;/option&gt;
      &lt;option&gt;New York&lt;/option&gt;
      &lt;option&gt;Washington&lt;/option&gt;
  &lt;/select&gt;
  
  &lt;div class="tags-container"&gt;
      &lt;div class="tags tags-departments"&gt;
          &lt;span class="department tag"&gt;IT&lt;/span&gt;
          &lt;span class="department tag"&gt;Marketing&lt;/span&gt;
      &lt;/div&gt;
      &lt;div class="tags tags-locations"&gt;
          &lt;span class="location tag"&gt;New York&lt;/span&gt;
          &lt;span class="location tag"&gt;Washington&lt;/span&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>JavaScript:</strong></p>
  
  <pre><code>var selectClass = document.getElementsByClassName("filterTags")
  selectClass = selectClass[0]
  
  selectClass.onchange= function() {
      var filterOptions, tags, i, span;
      filterOptions = this.options[this.selectedIndex].value
      tags = document.getElementsByClassName("tags-departments")
      span = document.querySelectorAll(".department")
      for (i = 0; i &lt; tags.length; i++) {
          if (span) {
              if (span[i].innerHTML.indexOf(filterOptions) &gt; -1) {
                  span[i].parentNode.parentNode.parentNode.style.display = ""
              } else {
                  span[i].parentNode.parentNode.parentNode.style.display = "none"
              }
              if(filterOptions == "All") {
                  span[i].parentNode.parentNode.parentNode.style.display = ""
              }
          }
      }
  }
  </code></pre>