Question

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

我有一个<select> id="selcat"和一个id="maplist"的表格。 select控件的<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/

jquery show hide tr by select option

1 个答案: