javascript - 如何通过单独的按钮更改过滤器输入
问题描述
我正在构建一个可以通过标准过滤器输入和选择链接进行过滤的列表。例如，您可以通过更改过滤器输入或选择表格上方的链接“Butler County”来过滤县“Butler”。标准过滤器效果很好，但我无法获得上面的链接来更改下面的过滤器输入。我需要对 3,000 多个县执行此操作，并且链接需要更改下面的过滤选项，以便用户知道哪个县被过滤，任何帮助将不胜感激！
<a href="#" class="county">Butler County</a>
<div class="row">
<table class="table">
<thead>
<tr class="filters">
<th>County <!--User-->
<select id="assigned-county-filter" class="form-control">
<option>All</option>
<option>Sedgwick</option>
<option>Butler</option>
<option>Harvey</option>
</select>
</th>
<th>City <!--Status-->
<select id="city-filter" class="form-control">
<option>Any</option>
<option>Wichita</option>
<option>Newton</option>
<option>Andover</option>
<option>El Dorado</option>
<option>Pratt</option>
</select>
</th>
<th>Parking Type <!--Milestone-->
<select id="type-filter" class="form-control">
<option>All</option>
<option>RV Park</option>
<option>Tiny House Community</option>
</select>
</th>
<th>THA Verified? <!--Priority-->
<select id="verification-filter" class="form-control">
<option>All</option>
<option>Yes</option>
<option>No</option>
</select>
</th>
<th>Tags
<select id="tags-filter" class="form-control">
<option>All</option>
<option>50+</option>
<option>Homestead</option>
</select>
</th>
</tr>
</thead>
</table>
<div class="row">
<div id="task-5" class="task-list-row listing" data-task-id="5" data-assigned-county="Sedgwick" data-city="Wichita" data-type="Tiny House Community" data-verification="Yes" data-tags="None">
<div class="container">
<div class="row">
<div class="col-lg-6">
<h3 class="listing-title">Bubba's Tiny House Community</h3>
<p class="listing-description">
2372 Village Road<br>
Wichita, Kansas 31162<br>
+1.735.421.5435
</p>
</div>
<div class="col-lg">
<h3 class="verification">THA Verified</h3>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div id="task-4" class="task-list-row listing" data-task-id="4" data-assigned-county="Butler" data-city="El Dorado" data-type="RV Park" data-verification="Yes" data-tags="None">
<div class="container">
<div class="row">
<div class="col-lg-6">
<h3 class="listing-title">Corner Stone RV Park</h3>
<p class="listing-description">
2372 Corner Stone Drive<br>
El Dorado, Kansas 31162<br>
+1.735.421.5435
</p>
</div>
<div class="col-lg">
<h3 class="verification">THA Verified</h3>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div id="task-3" class="task-list-row listing" data-task-id="3" data-assigned-county="Pratt" data-city="Pratt" data-type="Tiny House Community" data-verification="Yes" data-tags="Homestead">
<div class="container">
<div class="row">
<div class="col-lg-6">
<h3 class="listing-title">Lakeside Village</h3>
<p class="listing-description">
2372 Lakeside Drive<br>
Pratt, Kansas 31162<br>
+1.735.421.5435
</p>
</div>
<div class="col-lg">
<h3 class="verification">THA Verified</h3>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div id="task-2" class="task-list-row listing" data-task-id="2" data-assigned-county="Harvey" data-city="Newton" data-type="RV Park" data-verification="No" data-tags="50+">
<div class="container">
<div class="row">
<div class="col-lg-6">
<h3 class="listing-title">Sunset RV Park</h3>
<p class="listing-description">
2372 Allendale Drive<br>
Newton, Kansas 31162<br>
+1.735.421.5435
</p>
</div>
<div class="col-lg">
<h3 class="verification">Not Verified | Verifiy Now</h3>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div id="task-1" class="task-list-row listing" data-task-id="1" data-assigned-county="Butler" data-city="Andover" data-type="RV Park" data-verification="No" data-tags="None">
<div class="container">
<div class="row">
<div class="col-lg-6">
<h3 class="listing-title">Trojan RV Park</h3>
<p class="listing-description">
2372 1st Drive<br>
Andover, Kansas 31162<br>
+1.735.421.5435
</p>
</div>
<div class="col-lg">
<h3 class="verification">Not Verified | Verify Now</h3>
</div>
</div>
</div>
</div>
</div>
</section>
希望这个链接有效！提琴手
解决方案
为按钮添加了 onclick 事件。这是一个可能的解决方案
var
userFilter, statusFilter, milestoneFilter, priorityFilter, tagsFilter;
function updateFilters() {
$('.task-list-row').hide().filter(function() {
var
self = $(this),
result = true; // not guilty until proven guilty
if (userFilter && (userFilter != 'All')) {
result = result && userFilter === self.data('assigned-county');
}
if (statusFilter && (statusFilter != 'Any')) {
result = result && statusFilter === self.data('city');
}
if (milestoneFilter && (milestoneFilter != 'All')) {
result = result && milestoneFilter === self.data('type');
}
if (priorityFilter && (priorityFilter != 'All')) {
result = result && priorityFilter === self.data('verification');
}
if (tagsFilter && (tagsFilter != 'All')) {
result = result && tagsFilter === self.data('tags');
}
return result;
}).show();
}
// Assigned County Dropdown Filter
$('#assigned-county-filter').on('change', function() {
userFilter = this.value;
updateFilters();
});
// Task City Dropdown Filter
$('#city-filter').on('change', function() {
statusFilter = this.value;
updateFilters();
});
// Task Parking Type Dropdown Filter
$('#type-filter').on('change', function() {
milestoneFilter = this.value;
updateFilters();
});
// Task Verification Dropdown Filter
$('#verification-filter').on('change', function() {
priorityFilter = this.value;
updateFilters();
});
// Task Tags Dropdown Filter
$('#tags-filter').on('change', function() {
tagsFilter = this.value;
updateFilters();
});
//Added in a click function
$('#bc').click(function() {
$('#assigned-county-filter').val('Butler').trigger('change');
}).listing {
padding-bottom: 1rem;
border-bottom: 2px #737373 solid;
}
.listing-title {
font-size: 2rem;
line-height: 1;
font-weight: bold;
}
.listing-description {
font-size: 1.6rem;
}
.panel {
width: 100%;
}
.verification {
float: right;
font-size: 1.6rem;
font-weight: bold;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="container" style="margin-top:10rem;">
<!--An id here to reference in js-->
<a href="#" id="bc" class="county">Butler County</a>
<div class="row">
<table class="table">
<thead>
<tr class="filters">
<th>County
<!--User-->
<select id="assigned-county-filter" class="form-control">
<option>All</option>
<option>Sedgwick</option>
<option>Butler</option>
<option>Harvey</option>
</select>
</th>
<th>City
<!--Status-->
<select id="city-filter" class="form-control">
<option>Any</option>
<option>Wichita</option>
<option>Newton</option>
<option>Andover</option>
<option>El Dorado</option>
<option>Pratt</option>
</select>
</th>
<th>Parking Type
<!--Milestone-->
<select id="type-filter" class="form-control">
<option>All</option>
<option>RV Park</option>
<option>Tiny House Community</option>
</select>
</th>
<th>THA Verified?
<!--Priority-->
<select id="verification-filter" class="form-control">
<option>All</option>
<option>Yes</option>
<option>No</option>
</select>
</th>
<th>Tags
<select id="tags-filter" class="form-control">
<option>All</option>
<option>50+</option>
<option>Homestead</option>
</select>
</th>
</tr>
</thead>
</table>
<div class="row">
<div id="task-5" class="task-list-row listing" data-task-id="5" data-assigned-county="Sedgwick" data-city="Wichita" data-type="Tiny House Community" data-verification="Yes" data-tags="None">
<div class="container">
<div class="row">
<div class="col-lg-6">
<h3 class="listing-title">Bubba's Tiny House Community</h3>
<p class="listing-description">
2372 Village Road<br> Wichita, Kansas 31162<br> +1.735.421.5435
</p>
</div>
<div class="col-lg">
<h3 class="verification">THA Verified</h3>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div id="task-4" class="task-list-row listing" data-task-id="4" data-assigned-county="Butler" data-city="El Dorado" data-type="RV Park" data-verification="Yes" data-tags="None">
<div class="container">
<div class="row">
<div class="col-lg-6">
<h3 class="listing-title">Corner Stone RV Park</h3>
<p class="listing-description">
2372 Corner Stone Drive<br> El Dorado, Kansas 31162<br> +1.735.421.5435
</p>
</div>
<div class="col-lg">
<h3 class="verification">THA Verified</h3>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div id="task-3" class="task-list-row listing" data-task-id="3" data-assigned-county="Pratt" data-city="Pratt" data-type="Tiny House Community" data-verification="Yes" data-tags="Homestead">
<div class="container">
<div class="row">
<div class="col-lg-6">
<h3 class="listing-title">Lakeside Village</h3>
<p class="listing-description">
2372 Lakeside Drive<br> Pratt, Kansas 31162<br> +1.735.421.5435
</p>
</div>
<div class="col-lg">
<h3 class="verification">THA Verified</h3>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div id="task-2" class="task-list-row listing" data-task-id="2" data-assigned-county="Harvey" data-city="Newton" data-type="RV Park" data-verification="No" data-tags="50+">
<div class="container">
<div class="row">
<div class="col-lg-6">
<h3 class="listing-title">Sunset RV Park</h3>
<p class="listing-description">
2372 Allendale Drive<br> Newton, Kansas 31162<br> +1.735.421.5435
</p>
</div>
<div class="col-lg">
<h3 class="verification">Not Verified | Verifiy Now</h3>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div id="task-1" class="task-list-row listing" data-task-id="1" data-assigned-county="Butler" data-city="Andover" data-type="RV Park" data-verification="No" data-tags="None">
<div class="container">
<div class="row">
<div class="col-lg-6">
<h3 class="listing-title">Trojan RV Park</h3>
<p class="listing-description">
2372 1st Drive<br> Andover, Kansas 31162<br> +1.735.421.5435
</p>
</div>
<div class="col-lg">
<h3 class="verification">Not Verified | Verify Now</h3>
</div>
</div>
</div>
</div>
</div>
</section>推荐阅读
- javascript - 如何使用用户输入值更新图像 src 属性
- python-3.x - Python selenium 问题定位下拉元素
- java - 将文件输入添加到树形图中
- java - 错误类型错误：无法设置未定义的属性“名称”
- android - 我可以使用一个工厂将视图模型/存储库调用与 kodein 绑定吗
- flutter - 如何使 Row 小部件成为灵活的小部件？
- django - 通过 urlpatterns 和视图替换 django-postman 中的默认表单
- sql - 加入玩家和游戏桌以获得玩家积分
- c++ - 如何将字符串作为指针执行大写转换
- android - 如何在Android Q中获取特定文件夹的路径