Question

My requirement is to display a row if all drop downs in the above row’s value is not “Select Answer”.If Any drop down’s answer is “Select Answer” all the drop downs in the below row of its row should be hidden. How can i achieve that. Any idea.
Below is my HTML code..

 <table>
<tr>
    <td>
         <select  id="S1"  class="dropdown">
            <option value="" selected="selected">Select answer</option>
            <option value="1" >A</option>
            <option value="2">B</option>
            <option value="3">C</option>
        </select>
    </td>
            <td>
    <select id="S2"  class="dropdown">
        <option value="" selected="selected">Select answer</option>
        <option value="1">A</option>
        <option value="2" >B</option>
        <option value="3">C</option>
    </select>
    </td>

</tr>
<tr>
    <td>
    <select id="S2"  class="dropdown">
        <option value="" selected="selected">Select answer</option>
        <option value="1">A</option>
        <option value="2" >B</option>
        <option value="3">C</option>
    </select>
    </td>
            <td>
    <select id="S2"  class="dropdown">
        <option value="" selected="selected">Select answer</option>
        <option value="1">A</option>
        <option value="2" >B</option>
        <option value="3">C</option>
    </select>
    </td>
    </tr>
 </table>

Answer 1

I created a jsFiddle that has working code in it. I would suggest modifying it to use more semantic markup, and you will have to add some logic to check up the stack (top most tr) to make sure to only show the ones that need to be shown, but this should get you a very good starting point to answering your problem.