複数のドロップダウンに依存するドロップダウンオプション

Question

最初のドロップダウンオプションの選択に基づいて2番目のドロップダウンオプションを設定する単純なjQueryがあります。しかし、私はこの依存関係の複数のインスタンスを行内に持つ必要があります。

初めて動作しますが、最初のドロップダウンオプションを別の行に変更すると、以前選択した2番目のオプションがすべてリセットされます。

最初のドロップダウンオプションの別の行が変更されたときに、2番目のドロップダウンオプションを保持する方法についてのヘルプが必要です。ここに私のコードは、これまでのところ、ここに

<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script> 

<script type="text/javascript"> 

dairy=new Array('Select','Milk','Egg','Cheese'); 
fruits=new Array('Select','Apple','Orange','Banana'); 

populateSelect(); 

$(function() { 

    for(var i = 0; i < 7; i++) { 

    $('#diet'+i).change(function(){ 
    populateSelect(); 
    }); 
    } 
    }); 

function populateSelect(){ 

    for(var i = 0; i < 7; i++) { 

    type=$('#diet'+i).val(); 
    $('#item'+i).html(''); 

    if(type==1){ 
     dairy.forEach(function(t) { 
     $('#item'+i).append('<option>'+t+'</option>'); 
     }); 
     }  

     if(type==2){ 
      fruits.forEach(function(t) { 
      $('#item'+i).append('<option>'+t+'</option>'); 
     }); 
     } 
    } 
    } 

</script> 

とは、HTML部分である

<table class="report-table"> 
<tr> 
    <th>Days</th> 
    <th>Diet</th> 
    <th>Item</th> 
    </tr> 
<tr> 
    <td>Mon</td><td align='center'><select name="diet0" id="diet0"> 
    <option value='' selected>Select Diet</option> 
    <option value="1">Dairy</option> 
    <option value="2">Fruit</option></select></td> 
    <td align='center'><select name="item0" id="item0"> 
    <option value='' selected>Item...</option> 
    </select></td> 
</tr><tr> 
    <td>Tues</td><td align='center'><select name="diet1" id="diet1"> 
    <option value='' selected>Select Diet</option> 
    <option value="1">Dairy</option> 
    <option value="2">Fruit</option> 
    </select></td> 
    <td align='center'><select name="item1" id="item1"> 
    <option value='' selected>Item...</option> 
    </select></td> 
    </tr><tr> 
    <td>Wed</td><td align='center'><select name="diet2" id="diet2"> 
     <option value='' selected>Select Diet</option> 
     <option value="1">Dairy</option> 
     <option value="2">Fruit</option> 
     </select></td> 
    <td align='center'><select name="item2" id="item2"> 
     <option value='' selected>Item...</option> 
    </select></td> 
    </tr><tr> 
     <td>Thurs</td><td align='center'><select name="diet3" id="diet3"> 
     <option value='' selected>Select Diet</option> 
     <option value="1">Dairy</option> 
     <option value="2">Fruit</option> 
     </select></td> 
     <td align='center'><select name="item3" id="item3"> 
     <option value='' selected>Item...</option> 
     </select></td> 
     </tr><tr> 
     <td>Fri</td><td align='center'><select name="diet4" id="diet4"> 
      <option value='' selected>Select Diet</option> 
      <option value="1">Dairy</option> 
      <option value="2">Fruit</option> 
      </select></td> 
     <td align='center'><select name="item4" id="item4"> 
      <option value='' selected>Item...</option> 
     </select></td> 
     </tr><tr> 
      <td>Sat</td><td align='center'><select name="diet5" id="diet5"> 
      <option value='' selected>Select Diet</option> 
      <option value="1">Dairy</option> 
      <option value="2">Fruit</option> 
      </select></td> 
      <td align='center'><select name="item5" id="item5"> 
      <option value='' selected>Item...</option> 
      </select></td> 
      </tr><tr> 
      <td>Sun</td><td align='center'><select name="diet6" id="diet6"> 
       <option value='' selected>Select Diet</option> 
       <option value="1">Dairy</option> 
       <option value="2">Fruit</option> 
       </select></td> 
      <td align='center'><select name="item6" id="item6"> 
       <option value='' selected>Item...</option> 
      </select></td> 
      </tr> 
</table> 

私は、これはJSFiddleに掲載持っているので、あなたはそれがやっているかを見ることができます。 https://jsfiddle.net/sn4hjrLd/

私は何か助けに感謝します、乾杯！

Answer 1

変更ハンドラでは、すべての選択をサイクリングし、それらをすべて更新します。

すべての選択肢（「ダイエット」と「項目」）にクラス名を割り当てる必要があります。次に、変更ハンドラを実行します。

var item = $(this).closest('tr').find('.item'); 
item.html(""); 
//loop through array and populate item. 

これらの変更では、オン変更ハンドラは特定の行内でのみ動作します。

さらに展開するには、テーブルに変更ハンドラを配置し、ループまたはIDをまったく処理しないでください。 https://jsfiddle.net/sn4hjrLd/1/