Question

I have a select which I would like to use to filter a table rows based on the data attribute.

E.g:

<select>
    <option value="0">View all</option>
    <option value="1">Foo1</option>
    <option value="2">Foo2</option>
    <option value="3">Foo3</option>
</select>

<table>
    <tr data-foo="1">
        <td>Foo</td>
        <td>Foo</td>
    </tr>
    <tr data-foo="2">
        <td>Foo2</td>
        <td>Foo2</td>
    </tr>
    <tr data-foo="1">
        <td>Foo</td>
        <td>Foo</td>
    </tr>
    <tr data-foo="2">
        <td>Foo2</td>
        <td>Foo2</td>
    </tr>
    <tr data-foo="3">
        <td>Foo3</td>
        <td>Foo3</td>
    </tr>
</table>

I have this but the filter is not working in doesn’t show any rows.

$("select").change(function() {
    $("tr").hide().filter(function(index){
        return ($(this).data("foo") == this.value || this.value == 0);
    }).show();
});

Answer 1

this within the filter function, doesn’t refer to your select element.

$("select").change(function() {
    var val = this.value;
    $("tr").hide().filter(function(index){
        return ($(this).data("foo") == val || val == 0);
    }).show();
});