多个下拉列表的相关下拉选项

Question

I have a simple jQuery working to populate second dropdown options based the selection of the first dropdown option. But I need to have multiple instances of this dependency in rows.

It works the first time, but if I change the first dropdown option in another row, all of the second options previously selected gets reset.

I need help with how to retain the second dropdown options when another row of first dropdown option is changed. Here is my code so far,

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

And here is the HTML portion,

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

I have this posted on JSFiddle, so you can see what it's doing. https://jsfiddle.net/sn4hjrLd/

I appreciate any help, Cheers!

Answer 1

In your change handler, you are cycling through all selects and updating them all.

You should assign class names to all selects ("diet" and "item"). Then on your change handler you can do

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

With these changes, your on change handler works only within a specific row.

To further expand, you can place your change handler on the table and not deal with the loops or ids at all.

Here is an update to your fiddle to show a single change handler and row-relative updates: https://jsfiddle.net/sn4hjrLd/1/