如何修改代码来检查下拉框是否有值然后搜索- ASP.NET/JS

Question

我有一个名为myTable的表，它显示一个文件列表。然后我有一个下拉框和一个搜索框。

所有这些功能工作，如果我搜索一个PO号，如果我选择一个供应商-这一切都工作得很好。

我想修改我的JS代码搜索框检查下拉框是否填充，如果是，然后在搜索PO号时考虑到这一点。

我的cshtml代码如下:

<h1 style="color: white">Purchase Orders</h1>
<p>
<a asp-page="Create" style="color:white">Create File</a>
</p>
<div class="row">
<div class="col-sm-12">
<div class="form-check-inline pull-right">
<label style="color:white">Search</label>
<input type="text" class="form-control" id="myInput" placeholder="Search Purchase Orders..." onkeyup="myFunction()" />
</div>
<select asp-items="@((List<SelectListItem>)ViewData["test"])" id="vendor" onchange="myFunctionThree()">
<option value="" disabled selected> Select a Vendor</option>
</select>
<input class="btn btn-light" value="Clear All Filters" onclick="history.go(0)" style="float: right">
<table class="table" style="background-color: white" id="myTable">
<thead>
<tr class="header">
<th>
PO No.
</th>

<th>
Haulier
</th>
<th>
Comments
</th>
<th>
Vendor
</th>
<th>
Upload
</th>
<th>
Date Uploaded
</th>
<th>Download</th>
<th>Delete Attachment</th>
<th>Notify</th>
<th>Sent</th>
<th>
</th>
</tr>
</thead>
<tbody>
@foreach (var item in Model.Files)
{
if (item.FileType == "Purchase Order")
{
<tr>
<td>
@Html.DisplayFor(modelItem => item.Number)
</td>

<td>
@Html.DisplayFor(modelItem => item.Haulier)
</td>
<td>
@Html.DisplayFor(modelItem => item.Comments)
</td>
<td>
@Html.DisplayFor(modeItem => item.Vendor.VendorName)
</td>
<td>
<a asp-page="Upload" asp-route-id="@item.Id">Upload File Attachment</a>
</td>
<td>
@Html.DisplayFor(modelItem => item.UploadDate)
</td>
<td>
@if (item.Attachment != null)
{
<form asp-page-handler="Download" method="post" asp-route-id="@item.Id">
<input type="submit" class="btn btn-dark" value="Download">
</form>
}
</td>
<td>
@if (item.Attachment != null)
{
<form asp-page-handler="Delete" method="post" asp-route-id="@item.Id">
<input type="submit" class="btn btn-danger" value="Delete Attachment">
</form>
}
</td>
<td>
@if (item.Attachment != null)
{
<form asp-page-handler="Email" method="post" asp-route-id="@item.Id">
<input type="submit" class="btn btn-danger" value="Notify Vendor">
</form>
}
</td>
<td>
@Html.DisplayFor(modelItem => item.EmailSent)
</td>
<td>
<a asp-page="/Admin/Details" asp-route-id="@item.Id">Details</a>
</td>
</tr>
}
}
</tbody>
</table>
</div>
</div>

<script>

//function for search bar
function myFunction() {
// Declare variables
var input, filter, table, tr, td, i, txtValue;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
table = document.getElementById("myTable");
tr = table.getElementsByTagName("tr");
// Loop through all table rows, and hide those who don't match the search query
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";
}
}

}
}
}
//function for dropdown menu
function myFunctionThree()
{
// Declare variables
var input, filter, table, tr, td, i, txtValue;
input = document.getElementById("vendor");
filter = input.value.toUpperCase();
table = document.getElementById("myTable");
tr = table.getElementsByTagName("tr");
// Loop through all table rows, and hide those who don't match the search query
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[3];
if (td) {
txtValue = td.textContent || td.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}
</script>

我不太熟悉js，所以如果有人能给我指出正确的方向，请。

如果您需要进一步的信息，请点击:

Answer 1

在对代码进行了一些修修补补之后，我找到了一个可行的解决方案。

最终代码(搜索栏脚本):

//function for search bar
function myFunction() {
// Declare variables
var input, filter, table, tr, td, i, txtValue, dropdownValue, dropdownInput, dtd;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
table = document.getElementById("myTable");
tr = table.getElementsByTagName("tr");
dropdownInput = document.getElementById("vendor");
dropdownValue = dropdownInput.value.toUpperCase();
// Loop through all table rows, and hide those who don't match the search query
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[0];
dtd = tr[i].getElementsByTagName("td")[3];
if (td) {
txtValue = td.textContent || td.innerText;
dropTxtValue = dtd.textContent || dtd.innerText;
if(dropdownValue == ""){
if (txtValue.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
else{
if((txtValue.toUpperCase().indexOf(filter) > -1) && (dropTxtValue.toUpperCase().indexOf(dropdownValue) > -1)){
tr[i].style.display = "";
}else{
tr[i].style.display = "none";
}
}
}
}
}