Display Next row after completing selection of all dropdowns in the all above rows

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<开发者_如何学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>

---

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.

---

start with all but one hidden using either inline style, or preferably doing it with jquery. Then something like:

$('select.dropdown').bind('change',function() {
    var showNext = true;
    $('select.dropdown:visible').each( function() {
        if ( $(this).val() == '' ) showNext = false; 
    });
    if ( showNext ) {
       $('select.dropdown:hidden:first').show();
    }
});

I think it might work better not in a table though, and you should really have label elements with your selects. Which would require hiding and showing with the associated select.

---

First of all the ids should always be unique on a page which is not in the markup you have specified. Please try below code

$(function(){
var firstTr = $("table tr:first");
firstTr.next("tr").hide();

firstTr.find('select.dropdown').bind('change',function() {
    var showNextTr = $(this).val() != "";
    if(showNextTr){
      firstTr.find('select.dropdown').each( function() {
          if ( $(this).val() == '' ){ 
             showNextTr = false; 
             return false;
          }
      });
    }

    if ( showNextTr ) {
       firstTr.next("tr").show();
    }
    else{
       firstTr.next("tr").hide();
    }
});
});