VS2019 ASP.Net MVC I am trying to filter a table based on the selected value in a drop down list. When I select an Item from the dropdown list, nothing happens, the table is not filtered
@ModelType IEnumerable(Of test.new_bacsreports)
@Code
ViewData("Title") = "Index"
Layout = "~/Views/Shared/_Layout.vbhtml"
End Code
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<h2>Index</h2>
<body>
<table id="table_format" class="table table-bordered table-striped table-hover table-list-search">
<thead>
<tr>
<th>
@Html.DisplayNameFor(Function(model) model.new_accessed)
</th>
<th>
@Html.DisplayNameFor(Function(model) model.new_downloaddate)
</th>
<th>
@Html.DisplayNameFor(Function(model) model.new_reporttype)
<select id='filterText' style='display:inline-block' onchange='filterText()'>
<option disabled selected>Filter By Report</option>
<option value='INPUT REPORT'>INPUT REPORT</option>
<option value='ADDACS REPORT'>ADDACS REPORT</option>
<option value='All Reports'>All Reports</option>
</select>
</th>
<th>
@Html.DisplayNameFor(Function(model) model.new_sun)
</th>
<th></th>
</tr>
</thead>
<tbody id="myTable">
@For Each item In Model
@<tr>
<td>
@Html.DisplayFor(Function(modelItem) item.new_accessed)
</td>
<td>
@Html.DisplayFor(Function(modelItem) item.new_downloaddate)
</td>
<td>
@Html.DisplayFor(Function(modelItem) item.new_reporttype)
</td>
<td>
@Html.DisplayFor(Function(modelItem) item.new_sun)
</td>
<td>
@Html.ActionLink("Details", "Details", New With {.id = item.Id})
</td>
</tr>
Next
</tbody>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script>
function filterText() {
var rex = new RegExp($('#filterText').val());
if (rex == "/all/") { clearFilter() } else {
$('.content').hide();
$('.content').filter(function () {
return rex.test($(this).text());
}).show();
}
}
function clearFilter() {
$('.filterText').val('');
$('.content').show();
}
</script>
</body>