上記のすべての行のすべてのドロップダウンの選択を完了した後の次の行

Question

私の要件は、上記の行の値のすべてのドロップダウンが「回答を選択」でない場合に行を表示することです。行の下の行のすべてのドロップダウンを非表示にする必要があります。どのように私はそれを達成することができます。何か案が。以下は
インラインスタイル、または好ましくはjQueryを使ってそれをやってのいずれかを使用して隠された1以外のすべてと

<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

私はjsFiddleに作業コードを作成しました。より意味のあるマークアップを使用するように修正することをお勧めします。スタックをチェックするためにロジックを追加する必要があります（最上位のtr）。表示する必要のあるものだけを表示するようにしてください。あなたの問題に答える良い出発点。

Answer 2

開始..私のHTMLコードです。次に、次のようなものがあります。

テーブルではうまく動作しない可能性があります。実際には、選択したラベル要素が必要です。これは、関連する選択肢を隠して表示する必要があります。

Answer 3

まず、指定したマークアップにないページでは、すべてのIDが常に一意である必要があります。以下のコードを試してください

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