英文:
jQuery Dropdown Filter Returns only one result
问题
我有一个显示活动信息的表格。其中一个列是“State”，显示活动所在的州。我希望我的州的下拉列表能筛选出表格中匹配的州。我目前的代码可以做到这一点，但它只返回最后一个匹配的州。我希望我的 jQuery 过滤器能返回所有匹配的州。举例来说，如果我的表格中有两个在得克萨斯州举行的活动 - 如果我在下拉列表中选择得克萨斯州，只会返回其中一个活动。我该如何才能显示两个得克萨斯州的活动？我相信我错过了一些简单的东西。
我的代码如下：
我有一个典型的州下拉列表的 HTML，包含所有州，但这里是一个简单的示例，没有列出每个州：
$("#filter").change(function() {
var filterValue = $(this).val();
var row = $('.row-conventions');
console.log(filterValue);
row.each(function(i, el) {
if ($(el).attr('data-type') == filterValue) {
row.hide();
$(el).show();
}
});
if ("all" == filterValue) {
row.show();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label>Select Your State:</label>
<select class="state" id="filter">
<option value="all" selected="selected">Select a State</option>
<option value="Alabama">Alabama</option>
<option value="Alaska">Alaska</option>
</select>
我尝试将 .each 更新为 .map，但没有奏效。
英文:
I have a table that displays event information. One of the columns is "State" showing what State the event is being held in. I want my dropdown list of states to filter only the matching states in the table. The current code I have does this but it only returns the last matching state. I want my jQuery filter to return all the matching states. For example, if there are two events in my table happening in Texas - if I select Texas in the dropdown only one of the events is returned. How do I get it to show me both Texas events? I'm sure I'm missing something simple.
My code
I have a typical State Dropdown html with all states but here's a quick example without every state:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
$("#filter").change(function() {
// console.clear();
var filterValue = $(this).val();
var row = $('.row-conventions');
console.log(filterValue);
row.each(function(i, el) {
if ($(el).attr('data-type') == filterValue) {
row.hide();
$(el).show();
}
});
if ("all" == filterValue) {
row.show();
}
});
<!-- language: lang-html -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label>Select Your State:</label>
<select class="state" id="filter">
<option value="all" selected="selected">Select a State</option>
<option value="Alabama">Alabama</option>
<option value="Alaska">Alaska</option>
</select>
<!-- end snippet -->
I attempted to update .each to .map but that didn't work.
答案1
得分: 0
$row("#filter").change(function() {
var filterValue = $this.val();
var row = $('.row-conventions');
console.log(filterValue);
row.hide();
row.each(function(i, el) {
if ($(el).attr('data-type') == filterValue) {
$(el).show();
}
});
if ("all" == filterValue) {
row.show();
}
});
英文:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
$("#filter").change(function() {
// console.clear();
var filterValue = $(this).val();
var row = $('.row-conventions');
console.log(filterValue);
row.hide();
row.each(function(i, el) {
if ($(el).attr('data-type') == filterValue) {
$(el).show();
}
});
if ("all" == filterValue) {
row.show();
}
});
<!-- end snippet -->
I just needed to move row.hide() outside of the function.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论