Estoy usando el código básico de w3schools para filtrar una tabla usando un menú desplegable. El problema es que no filtra más de 1 desplegable. tengo estas preguntas:

• ¿Cómo puedo hacer que funcione para 3 menús desplegables y 1 barra de búsqueda?
• ¿Cómo puedo hacer que funcione usando la opción de valor de <option value="VALUE">VALUE</option> en lugar de la opción <option>VALUE</option>
• ¿Hay alguna forma de poner una opción de 'todos los valores'? Para mostrar todas las entradas de la tabla.

Este es el código básico que estoy usando.

 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"; } } } }

Aquí hay un ejemplo: https://jsfiddle.net/mdomfu/jpasqned/12/

Gracias.