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..

Did you try .val()? .val() is the actual selected text of a dropdown list. — Hanlet Escaño
– Hanlet Escaño, Commented Jul 11, 2014 at 22:26
The problem is that, a @html.dropdownlist is a <select> tag, so .dropdown wont work...still cant make it work — AAlferez
– AAlferez, Commented Jul 14, 2014 at 14:58

Barmar · Accepted Answer · 2014-07-11 22:28:36Z

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();

answered Jul 11, 2014 at 22:28

Barmar

789k57 gold badges555 silver badges669 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

EduardoFernandes · Accepted Answer · 2014-07-11 22:34:53Z

0

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();
}

answered Jul 11, 2014 at 22:34

EduardoFernandes

3,5191 gold badge15 silver badges12 bronze badges

2 Comments

AAlferez Over a year ago

The logic is wrong, you are not considering that some items can be COMPLETED and others INCOMPLETE

EduardoFernandes Over a year ago

The idea here is to show only how to get the value from a selected dropdown and handle it.

Collectives™ on Stack Overflow

jQuery hide row depending on table content

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related