Javascript 使用HTMLSELECT使ajax刷新以筛选表

正如标题中提到的，我想知道如何创建一个HTML选择框来生成ajax请求，并使用它来过滤表。我搜索了很多，但没有找到一个好的解决方案。 我怎样才能让它过滤

:

---

您的示例有点奇怪，因为您只过滤到一行，但下面是如何使其工作的

首先，给你和每个人一个id。我选择了一些通用的：

<select id='column-select'>
    <option value="all">All</option>
    <option value="tim">Tim</option>
    <option value="cook">Cook</option>
</select>
<br>
<br>
<br>
<table id='data' border="1">
    <tr>
        <th>Name</th>
        <th>Year</th>
    </tr>
    <tr>
        <td>Tim</td>
        <td>2015</td>
    </tr>
    <tr>
        <td>Cook</td>
        <td>2015</td>
    </tr>
</table>

现在，只需使用一些Jquery在列更改时过滤掉不需要的行

$(document).ready(function() { // Do nothing until document is ready
    $("#column-select").change(function() { // On <select> change... 
        var selection = $("#column-select").val();
        if (selection == "all")
        {
            $("#data tr").show(); // Show all rows
        } else
        {
            $("#data tr").each(function() { // For each row
                if ($(this).find("th").length == 0) // If this is not a heading row
                {
                    if ($(this).find("td").eq(0).text().toLowerCase() == selection)
                    {
                        // Show rows where the first column matches
                        $(this).show(); 
                    } else
                    }
                        // Hide rows where the first column does not match
                        $(this).hide();
                    }
                }
            });
        }
    });
});

---

演示。

是我的基本代码1。在问题中提供源代码，而不是在对问题的评论中。2.不要只使用JSFIDLE。将代码复制并粘贴到您的问题中，这样，如果源代码在JSFIDLE上不再可用，每个人都可以阅读。您为什么认为需要AJAX请求？AJAX请求在后台从服务器获取数据，但在您的示例中，您从需要的所有数据开始。那么我如何才能实现这一点？

$(document).ready(function() { // Do nothing until document is ready
    $("#column-select").change(function() { // On <select> change... 
        var selection = $("#column-select").val();
        if (selection == "all")
        {
            $("#data tr").show(); // Show all rows
        } else
        {
            $("#data tr").each(function() { // For each row
                if ($(this).find("th").length == 0) // If this is not a heading row
                {
                    if ($(this).find("td").eq(0).text().toLowerCase() == selection)
                    {
                        // Show rows where the first column matches
                        $(this).show(); 
                    } else
                    }
                        // Hide rows where the first column does not match
                        $(this).hide();
                    }
                }
            });
        }
    });
});