大家好，我一直在努力想出这个。我有6个字段。款式，颜色，尺寸，描述，SKU和单价。我试图这样做，当您从下拉列表中选择样式时，颜色下拉列表会过滤整个数据库并根据样式显示颜色，然后根据颜色选择过滤尺寸，之后描述SKU和UnitPrice将根据以前的选择从数据库自动填充。
我有的表格还可以添加其他行，这些行也有需要根据选择进行调整的下拉列表。
我主要在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。一些方向将不胜感激。
答案 0 :(得分：1)
你基本上有2个选项：
OR