jQuery hide row depending on table content

Question

I first had a table, lets say 4x4 defined by tr and td The last td contains a checkbox and it only can be 2 options, complete or incomplete (check or unchecked).

Now, on top of the table I have another dropdownlist that acts as a filter (All, Completed, Incomplete)

Depending on the filter value, my JS hides or shows the requested data:

    var sel = $("#Filter option:selected").text();

    if (sel == "All") {
        $('tr').find('td:has(:checkbox:checked)').parent().show();
        $('tr').find('td:has(:checkbox:not(:checked))').parent().show();
    }
    if (sel == "Complete") {
        $('tr').find('td:has(:checkbox:not(:checked))').parent().hide();
        $('tr').find('td:has(:checkbox:checked)').parent().show();
    }
    if (sel == "Incomplete") {
        $('tr').find('td:has(:checkbox:checked)').parent().hide();
        $('tr').find('td:has(:checkbox:not(:checked))').parent().show();
    }

This works as a charm.

Now, I want to change the checkbox for a dropdownlist. But I cannot find the way with JQuery to do it. I don't know the syntax to compare the text inside the dropdownlist inside the td inside the tr.

I tried:

$('tr').find('td').find(".dropdown :selected").parent().hide();

But I cannot find the way to specify the text inside the selected select..

Answer 1

Use something like this:

$("tr td .dropdown:selected[value='WHATEVER']").parent().hide();

to test the value of the drop element. Or if you want to test the text of the dropdown element:

$("tr td .dropdown:selected:contains(WHATEVER)").parent().hide();

Answer 2

You actually need to get the value of the checkbox, then compare its selection as complete or incomplete. Something like this:

if ($('tr').find('td').find(".dropdown option:selected").val() == "SOMEVALUE") {
    ($('tr').find('td').find(".dropdown option:selected").parent().hide();
} else {
    ($('tr').find('td').find(".dropdown option:selected").parent().show();
}