javascript 下拉筛选

JavaScript下拉筛选是一种非常方便快捷的功能，可以用于许多不同的场景。在本文中，我们将介绍一些常见的用例，并演示如何使用JavaScript来实现下拉筛选功能。

在许多网站和应用程序中，下拉筛选可以用于过滤表格数据、搜索结果、项目列表等等。例如，如果您有一个包含大量数据的表格，您可能希望用户能够在查看之前选择特定的筛选条件，例如日期范围、地区、类别等等。通过添加下拉筛选功能，您可以让用户更轻松地查找他们需要的信息。

<!-- HTML 代码 -->
<select id="filter">
<option value="all">全部</option>
<option value="foo">Foo</option>
<option value="bar">Bar</option>
<option value="baz">Baz</option>
</select>
<table id="data">
<thead>
<tr>
<th>ID</th>
<th>名称</th>
<th>类型</th>
<th>日期</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Foo A</td>
<td>foo</td>
<td>2019-01-01</td>
</tr>
<tr>
<td>2</td>
<td>Bar B</td>
<td>bar</td>
<td>2019-02-01</td>
</tr>
<tr>
<td>3</td>
<td>Baz C</td>
<td>baz</td>
<td>2019-03-01</td>
</tr>
</tbody>
</table>

在上面的示例中，我们有一个包含选项的下拉菜单。我们还有一个数据表格，其中每个项目都有一个类别列。我们希望用户能够通过选择下拉菜单中的选项来过滤数据，并只显示匹配的行。

// JavaScript 代码
var filterEl = document.getElementById('filter');
var dataEl = document.getElementById('data');
filterEl.addEventListener('change', function() {
var selected = filterEl.value;
var rows = dataEl.getElementsByTagName('tr');
for (var i = 0; i < rows.length; i++) {
var row = rows[i];
var type = row.getElementsByTagName('td')[2].textContent;
if (selected === 'all' || selected === type) {
row.style.display = 'table-row';
} else {
row.style.display = 'none';
}
}
});

在上面的JavaScript代码中，我们首先获取了页面上两个元素的引用：下拉菜单和表格。我们还添加了一个事件监听器，监听下拉菜单的变化。每当用户选择一个新的选项时，我们会获取选择的值，并根据该值过滤表格数据。

我们通过循环遍历数据表格中的每一行，并获取类型列中的文本值。我们可以使用此文本值来检查当前行是否匹配所选筛选器。如果该行匹配，我们将将其显示。否则，我们将其隐藏。这样，用户只会看到其选择的类型的行。

通过使用JavaScript编写的下拉菜单筛选功能，我们可以让用户更轻松地查找他们需要的信息。无论您是在过滤表格、搜索结果或项目列表，这种功能都是实现交互性用户体验的重要工具。

javascript 下拉 筛选

javascript 下拉筛选