jquery - jquery show hide tr by select option

Question

我的目标是通过选择显示/隐藏 tr。

我有一个<select>withid="selcat"和一个 table with id="maplist"。选择控件<options>是从 MySQL 记录集生成的，默认显示全部。

（在源代码中，我的 val 选项看起来就是这样）

现在我想在不通过 jQuery 刷新页面的情况下过滤它。

我试过这个：

$('select#selcat').change(function() {
    $("#maplist tr").hide().filter($(this).val()).show();
}).change();
});

但是所有 tr 都被这段代码隐藏了，我想知道出了什么问题。

Answer 1

采用以下 HTML：

<select id="selcat">
    <option value="[data-val='a']">A</option>
    <option value="[data-val='b']">B</option>
    <option value="[data-val='c']">C</option>
</select>

<table id="maplist">
    <tr data-val="a"><td>A</td></tr>
    <tr data-val="a"><td>A</td></tr>
    <tr data-val="b"><td>B</td></tr>
    <tr data-val="b"><td>B</td></tr>
    <tr data-val="c"><td>C</td></tr>
</table>

然后你的jQuery应该工作：

$('select#selcat').change(function() {
    $("#maplist tr").hide().filter($(this).val()).show();
}).change();

我的猜测是您在代码中发送了不正确的过滤器值，这就是人们想要查看您的 HTML 的原因。

看到这个小提琴：http: //jsfiddle.net/8jwsj/