[英]How to make dropdown list filter using jQuery
我想使下拉表过滤器取决于item.id
我尝试了几种方法,但是它们没有用。 我想要的是根据item.id
过滤表。
它使用此代码有效,但是当我尝试更改选定的值或项目时,它不起作用。 请帮忙。
$("#filterText").change(function() {
var rex = $('#filterText').val();
if (rex == "/all/") {
clearFilter()
} else {
var id = $('#' + rex);
id.hide();
// $('.toggle').filter(function () {
// return rex.test($(this).text());
// }).show();
}
});
function clearFilter() {
$('#filterText').val('');
$('.toggle').show();
}
<select id='filterText'>
@foreach (var item in Model)
{
<option value="@item.ID">@item.Title.ToString()</option>
}
</select>
<div class="panel-group" id="accordion">
<div id="faqs" class="faqs">
<table>
@foreach (var item in Model)
{
foreach (var child in item.questions)
{
<tr id="@item.ID" class="toggle faq faq-marketplace faq-authors">
<td class="togglet">@child.Title</td>
<td class="togglec">@child.Answer</td>
</tr>
}
}
</table>
</div>
</div>
您可以执行以下操作:
如果值不是全部,请选择所有tr
并显示全部。 然后,选择除值usine .not()
以外的所有其他tr
并隐藏。
$(function() { $("#filterText").change(function() { var rex = $('#filterText').val(); if (rex != "all") $("table tr").show().not('#' + rex).hide(); else $("table tr").show(); }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select id='filterText'> <option value="all"> All </option> <option value="1">Value 1</option> <option value="2">Value 2</option> <option value="3">Value 3</option> </select> <table> <tr id="1" class="toggle faq faq-marketplace faq-authors"> <td class="togglet">Title 1</td> <td class="togglec">Whatever 1</td> </tr> <tr id="2" class="toggle faq faq-marketplace faq-authors"> <td class="togglet">Title 2</td> <td class="togglec">Whatever 2</td> </tr> <tr id="3" class="toggle faq faq-marketplace faq-authors"> <td class="togglet">Title 3</td> <td class="togglec">Whatever 3</td> </tr> </table>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.