使两个筛选器表下拉列表同时工作



我试图使位置过滤器下拉列表和类别下拉列表同时工作,以便根据位置和类别显示表值,但displayDate函数不起作用。以下是网站:https://opportunities.sarahlim3.repl.co/discover.html这是页面的代码:

<select id="mylist" class='form-control'>
<option value="">Filter by location</option>
<option value="Remote">Remote</option>
<option value="Alabama">Alabama</option>
<option value="Alaska">Alaska</option>
<option value="Arizona">Arizona</option>
</select> 


<select id="categorylist" class='form-control'>
<option value="">Filter by category</option>
<option value="Computer Science">Computer Science</option>
<option value="Science">Science</option>
<option value="Political Science">Political Science</option>
<option value="Business/Marketing">Business/Marketing</option>
<option value="Music">Music</option>
<option value="Art">Art</option>
<option value="All STEM fields">All STEM fields</option>
</select> 
<button onclick="filterTable()">Submit</button>
<table id="show" style="padding:30px; width:90%;" class="internshipInfo">
<thead>
<tr>
<th>Internship name</th>
<th>Internship location</th>
<th>Internship category</th>
<th>Internship link</th>
<th>Internship deadline</th>
</tr>
</thead>
</table>

<script>
function searchFunction() {
var input, filter, table, tr, td, i, txtValue;
input = document.getElementById("searchList");
filter = input.value.toUpperCase();
table = document.getElementById("show");
tr = table.getElementsByTagName("tr");
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[0];
if (td) {
txtValue = td.textContent || td.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";

} else {
tr[i].style.display = "none";
}

}
}
}
</script>

<script>
function filterTable() {
var input, input2 filter, filter2, table, tr, td, i, test;
input = document.getElementById("mylist");
input2 = document.getElementById("categorylist");
filter = input.value.toUpperCase();
filter2 = input2.value.toUpperCase();
table = document.getElementById("show");
tr = table.getElementsByTagName("tr");
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[1];
test = tr[i].getElementsByTagName("td")[2]
if (td) {
if (td.toUpperCase() === filter && test.toUpperCase() === filter2) {
tr[i].style.display = "";

} else {
tr[i].style.display = "none";

}

}       
}

}
</script>

if语句应该像一样

if (td.innerHTML.toUpperCase() === filter.toUpperCase() && test.innerHTML.toUpperCase() === filter2.toUpperCase())