I'm using the basic code from w3schools to filter a table using a dropdown. The problem is that is not filtering more than 1 dropdown. I have this questions:

• How can I make it work for 3 dropdowns and 1 search bar?
• How can I make it work using the value option from <option value="VALUE">VALUE</option> instead of the option <option>VALUE</option>
• Is there any way to put an 'all values' option? To show all the table entries.

This is the basic code I'm using

function myFunction() {
  var input, filter, table, tr, td, i;
  input = document.getElementById("mylist");
  filter = input.value.toUpperCase();
  table = document.getElementById("posts-table-1");
  tr = table.getElementsByTagName("tr");
  
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[2];
    
    if (td) {
      if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } 
      else {
        tr[i].style.display = "none";
      }
    }
  }
}

Here is an example: https://jsfiddle.net/mdomfu/jpasqned/12/

Thanks.