使用下拉列表筛选表

我正在这里创建一个网站：https://opportunities.sarahlim3.repl.co/discover.html

如何更改JavaScript函数，使按位置筛选下拉列表和按类别筛选下拉列表协同工作，以便在用户单击两个条件时，根据这两个条件显示表值？另一个问题是，当你点击"；科学；在下拉列表中。我怎样才能使它成为准确的单词？

这是页面的代码：

<!DOCTYPE html>
<html>


<head>
<title>Table</title>


<link rel="stylesheet" href="style.css">
<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
<link rel="stylesheet" href="discover.css">
<script src="script.js">
</script>
</head>

<body>
<nav>
<div class="nav-bar">
<a href="index.html">Home</a>
<a href="discover.html">Find high school internships</a>
<a href="resume.html">Resume and CV Template</a>

</div>
</nav>

<h2>Add a High School Internship Listing</h2>
<p>*The five fields are required to add (paid internships only)</p>
<form>

<div class="search-box">
<input class="search-txt" type="text" name="" id="searchList" onkeyup="searchFunction()" placeholder="Search by name..."> <a class="search-btn" href="#">
<i class="fas fa-search"></i>
</a>
</div>

<table id="input-table">
<thead>
<tr>
<th>Internship name</th>
<td><input type="text" name="fname" id="fname" required></td>
</tr>
</thead>
<tbody>
<tr>
<th>Internship location</th>
<td><select id="location">
<option value="Remote">Remote</option>
<option value="Alabama">Alabama</option>
<option value="Alaska">Alaska</option>
<option value="Arizona">Arizona</option>
</select></td>
</tr>
<tr>
<th>Internship category</th>
<td> <select id="category">
<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></td>
</tr>

<tr>
<th>Internship link</th>
<td><input type="text" name="link" id="link" required></td>
</tr>
<tr>
<th>Internship deadline</th>
<td><input type="text" name="deadline" id="deadline" required></td>
</tr>


<tr id="btna">
<td colspan="2"><input type="button" name="button" id="btn" value="Add" onclick="onSubmit()"></td>
</tr>
</tbody>
</table>
</form>

<select id="mylist" onchange="locationFunction()" 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" onchange="myFunction()" 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> 
<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 locationFunction() {
var input, filter, table, tr, td, i;
input = document.getElementById("mylist");
filter = input.value.toUpperCase();
table = document.getElementById("show");
tr = table.getElementsByTagName("tr");
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[1];
if (td) {
if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";

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

}

}       
}
}
</script>

<script>
function myFunction() {
var input, filter, table, tr, td, i, test;
input = document.getElementById("categorylist");
filter = input.value.toUpperCase();
table = document.getElementById("show");
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";

}
}       
}
}
</script>
<script>

var list1 = [];

var list2 = [];

var list3 = [];

var list4 = [];

var list5 = [];

var n = 1;
var x = 0;

function AddRow(data1,data2,data3,data4,data5){
var AddRown = document.getElementById('show');
var NewRow = AddRown.insertRow(n);

list1[x] = data1;

list2[x] = data2;

list3[x] = data3;

list4[x] = data4;

list5[x] = data5;

if(list1[x]== "" ||list3[x]== ""||list4[x]== ""||list2[x]== ""||list5[x]==""){
}else{
var cel1 = NewRow.insertCell(0);
var cel2 = NewRow.insertCell(1);
var cel3 = NewRow.insertCell(2);
var cel4 = NewRow.insertCell(3);
var cel5 = NewRow.insertCell(4);
cel1.innerHTML = list1[x];

cel2.innerHTML = list2[x];

cel3.innerHTML = list3[x];

cel4.innerHTML = list4[x];
cel5.innerHTML = list5[x];

n++;

x++;
}

}

async function onPageLoad() {
let data = await fetch("https://db.neelr.dev/api/6912ef27259834e665455b74d2f5ae43");
let internships = await data.json()
Object.values(internships).forEach(v => AddRow(v.name, v.location, v.category,v.link, v.deadline ))
}
onPageLoad()
</script>

</body>


</html>

我提出了一个简单的解决方案。

从select和Create a new按钮中删除onchange，并在上面设置一个onclick监听器
在侦听器实现中。你可以将两者结合编码函数(locationFunction和myFunction(
通过这种方式，您将同时检查两个过滤器中的选择元素，并单击

例如，当前条件

if(txtValue.toUpperCase((.indexOf(filter(&gt-1(

将成为

if (txtValue1.toUpperCase() === filter1 && txtValue2.toUpperCase() === filter1)

p.S您需要组合，以便匹配条件一起检查filter1和filter2。

相关内容

最新更新

热门标签：