javascript - 如何根据先前多行列表的选择动态加载下拉列表

Question

您好，我一直在尝试解决这个问题。我有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 。一些方向将不胜感激。

Answer 1

这里基本上有两个选择:

1. 每次更改下拉列表时都将表单提交(到此页面)，让 PHP 读取所选内容，预填充已选择的下拉列表，并据此填充下一个下拉列表，并对每个下拉列表继续执行此操作.

或者

使用 AJAX，因为这正是它所擅长的。这是一个可以帮助您的链接:http://www.w3schools.com/ajax/ajax_database.asp