Question

我有一个简单的jQuery工作，根据第一个下拉选项的选择填充第二个下拉选项。但是我需要在行中有多个这种依赖的实例。

它第一次工作，但是如果我更改另一行中的第一个下拉选项，则先前选择的所有第二个选项都会重置。

如果更改了第一行下拉选项的另一行，我需要有关如何保留第二个下拉选项的帮助。到目前为止，这是我的代码，

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

通过这些更改，您的on change处理程序仅在特定行中起作用。

要进一步扩展，您可以将更改处理程序放在表上，而不是处理循环或ID。

以下是对您的小提示的更新，以显示单个更改处理程序和行相关更新：https://jsfiddle.net/sn4hjrLd/1/

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

1 个答案: