如何根据对具有多行的先前列表的选择来动态加载下拉列表

嗨，我一直在想办法解决这个问题。我有6块田地。款式、颜色、尺寸、说明、SKU和单价。我正在尝试获取它，所以当你从下拉列表中选择样式时，颜色下拉列表会在数据库中进行筛选，并根据样式显示颜色，大小会根据颜色的选择进行筛选，之后说明SKU和单价会根据之前的选择从数据库中自动填充。

我拥有的表单还可以添加其他行，这些行也有下拉列表，需要根据选择进行调整。

我主要在php工作，并没有真正使用javascript jquery或ajax太多。我们将非常感谢您的指导。

我的HTML/PHP

                                </tr>
                              </thead>
                              <tbody>
                                 <tr>
                                  <td>
                                    <input class="form-control abit-more-room input-sm qty test" type="text" id="invoice-qty[]" name="qty[]" onChange="change()" >
                                  </td>
                                  <?php 
                                  $style = "Select Style From Prods";
                                   try 
{
    $smt = $db->prepare($style); 
    $smt->execute(); 
} 
catch(PDOException $ex) 
{ 
    die("Failed to run query: "); 
}
$data = $smt->fetchAll(); 
                                  ?>
                                  <td>
                                    <select class="form-control abit-more-room input-sm" type="text" id="style[]" name="style[]"> 
                                    <?php foreach ($data as $rowb): ?>
                                    <option value="<?php echo $rowb['Style'];?>"> <?php echo $rowb['Style'];?> </option>
                                    <?php endforeach ?>
                                    </select>
                                  </td>
                                  <td>
                                     <select class="form-control abit-more-room input-sm" type="text" id="colour[]" name="colour[]"> <option value=""> </option>
                                  </td>
                                  <td>
                                    <select class="form-control abit-more-room input-sm" type="text" id="size[]" name="size[]"> <option value="" </option>
                                  </td>
                                  <td>
                                    <input class="form-control abit-more-room input-sm" type="text" id="invoice-description[]" name="description[]">
                                  </td>
                                  <td>
                                    <input class="form-control abit-more-room input-sm" type="text" id="invoice-sku[]" name="sku[]">
                                  </td>
                                  <td>
                                    <input class="form-control abit-more-room text-center input-sm amount" type="text" id="invoice-unit[]" name="unit[]" >
                                  </td>
                                  <td>
                                    <input class="form-control abit-more-room text-center input-sm balance" type="text" id="amount[]" name="amount[]">
                                    </td>
                                  <td>
                                    <input class="form-control abit-more-room text-center input-sm" type="text" id="invoice-itemtype[]" name="itemtype[]">
                                  </td>
                                  <td>
                                    <input class="form-control abit-more-room text-center input-sm" type="text" id="invoice-inventorytype[]" name="inventorytype[]">
                                  </td>
                                </tr>
                                </tbody>
                            </table>

                            <div class="row">
                              <div class="col-sm-12 text-right">
                                <button class="btn btn-sm btn-primary push-15-t push-20" type="button" id="addRow"><i class="icon fa fa-arrow-up push-5-r"></i> Add an Item</button>
                                <div class="col-sm-1 text-right">
                                <button onClick="calculate()" type="button" class="btn btn-sm btn-success push-15-t push-20" ><i class="icon fa fa-save push-5-r"></i> calculate</button>

我的添加行的Javascript

$(document).ready(function() {
          $('#addRow').on( 'click', function () {
              var table = document.getElementById("line-items");
              var lastRow = table.rows.length;
              //add new row with 12 empty cels
              var row = table.insertRow(-1);
              var cell1 = row.insertCell(0);
              var cell2 = row.insertCell(1);
              var cell3 = row.insertCell(2);
              var cell4 = row.insertCell(3);
              var cell5 = row.insertCell(4);
              var cell6 = row.insertCell(5);
              var cell7 = row.insertCell(6);
              var cell8 = row.insertCell(7);
              var cell9 = row.insertCell(8);
              var cell10 = row.insertCell(9);
              // Populate New Qty Cel **NOTE: MAKE SURE THERE ARE NO LINE BREAKS IN THE CODE (ALL ON 1 LINE!)
              cell1.innerHTML = "<input class='form-control abit-more-room input-sm qty' type='text' id='qty[]' name='qty[]'>";
              // Populate New Style Cel **NOTE: MAKE SURE THERE ARE NO LINE BREAKS IN THE CODE (ALL ON 1 LINE!)
              cell2.innerHTML = "<select class='form-control abit-more-room input-sm' type='text' id='style[]' name='style[]'> <option value=''> </option> </select>";
              // Populate New Colour Cel **NOTE: MAKE SURE THERE ARE NO LINE BREAKS IN THE CODE (ALL ON 1 LINE!)
              cell3.innerHTML = "<select class='form-control abit-more-room input-sm' type='text' id='colour[]' name='colour[]'> <option value=''> </option> </select>";
              // Populate New Size Cel **NOTE: MAKE SURE THERE ARE NO LINE BREAKS IN THE CODE (ALL ON 1 LINE!)
              cell4.innerHTML = "<select class='form-control abit-more-room input-sm' type='text' id='size[]' name='size[]'> <option value=''> </option> </select>";
              // Populate New Description Cel **NOTE: MAKE SURE THERE ARE NO LINE BREAKS IN THE CODE (ALL ON 1 LINE!)
              cell5.innerHTML = "<input class='form-control abit-more-room input-sm' type='text' id='description[]' name='description[]'>";
              // Populate New Sku Cel **NOTE: MAKE SURE THERE ARE NO LINE BREAKS IN THE CODE (ALL ON 1 LINE!)
              cell6.innerHTML = "<input class='form-control abit-more-room input-sm' type='text' id='sku[]' name='sku[]'>";
              // Populate New unit Cel **NOTE: MAKE SURE THERE ARE NO LINE BREAKS IN THE CODE (ALL ON 1 LINE!)
              cell7.innerHTML = "<input class='form-control abit-more-room text-center input-sm amount' type='text' id='unit[]' name='unit[]'>";
              // Populate New Amount Cel **NOTE: MAKE SURE THERE ARE NO LINE BREAKS IN THE CODE (ALL ON 1 LINE!)
              cell8.innerHTML = "<input class='form-control abit-more-room text-center input-sm balance' type='text' id='amount[]' name='amount[]'>";
              // Populate New Type Cel **NOTE: MAKE SURE THERE ARE NO LINE BREAKS IN THE CODE (ALL ON 1 LINE!)
              cell9.innerHTML = "<select class='form-control abit-more-room text-center input-sm' id='itemtype[]' name='itemtype[]'> <option value='1'> Product </option>  <option value='2'> Work Order </option> <option value='3'> Other Items </option> </select>  "; 

              // Populate New Total Cel **NOTE: MAKE SURE THERE ARE NO LINE BREAKS IN THE CODE (ALL ON 1 LINE!)
              cell10.innerHTML = "<select class='form-control abit-more-room text-center input-sm' id='inventorytype[]' name='inventorytype[]'> <option value='1'> Regular </option> <option value='2'> Sample </option> <option value='3'> Warehouse </option> </select>";

            });
          });

我主要在php工作，并没有真正使用javascript jquery或ajax太多。我们将非常感谢您的指导。