我有一个动态表，当最终用户按下按钮时生成行。在输入框上使用它毫无问题。现在我试图改变一个输入到一个组合框，从我的数据库查询数据。我所知道的问题是如何动态地添加组合框与它的php代码。
$(document).ready(function(){
var counter = 2;
$('.add-row').click(function() {
$(".item_form").append(
'<tr><td><input type="text" name="serialnoa[]" placeholder="serial no.' +
counter + '"/></td></tr>'
);
counter++;
});
$('.del-row').click(function() {
if($(".item_form tr").length != 2)
{
$(".item_form tr:last-child").remove();
counter--;
}
else
{
alert("You cannot delete first row");
}
});
});<!DOCTYPE html>
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="_css/inventory.css?v=<?=time();?>">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
</head>
<body>
<table class="item_form">
<tr>
<th>serial no.</th>
<th>brand<th>
</tr>
<tr>
<td><input type="text" placeholder="serial no.1" name="serialnoa[]"></td>
<td>
<select name="show_brands[]">
<?php
mysql_connect('localhost', 'root', 'adminpass');
mysql_select_db('my_db');
$sql = "SELECT DISTINCT brand FROM warehouse ORDER BY brand";
$result = mysql_query($sql);
while ($brand=mysql_fetch_assoc($result)) {
echo "<option value='".$brand['brand']."'>".$brand['brand']."</option>";
}
?>
</select>
</td>
</tr>
</table>
<table>
<tr>
<td><a href="#" class="add-row"><div>+ Row</div></td>
<td><a href="#" class="del-row"><div>- Row</div></td>
</tr>
</table>
</body>
</html>我刚刚使用MOCK来填充动态select框。您需要在server环境中删除该模拟。如果你的DB给出适当的数据，然后将该数据填充到JavaScript数组。然后，您可以使用该数组来填充动态select盒。
function populateSelect(element){
brands.forEach(function(brand){
$('<option />', {
value: brand,
text: brand
}).appendTo($(element));
})
}
$(document).ready(function(){
populateSelect('select'); //populating first select
var counter = 2;
$('.add-row').click(function() {
$(".item_form").append('<tr><td><input type="text" name="serialnoa[]" id="serialno' + counter + '" placeholder="serial no.' +
counter + '"/></td><td><select id="select-serialno' + counter + '"></select></td></tr>');
populateSelect("#select-serialno" + counter ); //populating new select created
counter++;
});
$('.del-row').click(function() {
if($(".item_form tr").length != 2)
{
$(".item_form tr:last-child").remove();
counter--;
}
else
{
alert("You cannot delete first row");
}
});
});
</script><!DOCTYPE html>
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="_css/inventory.css?v=<?=time();?>">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
<!--Uncomment below php code in your PHP environment -->
<!--<?php
mysql_connect('localhost', 'root', 'adminpass');
mysql_select_db('my_db');
$sql = "SELECT DISTINCT brand FROM warehouse ORDER BY brand";
$result = mysql_query($sql);
echo '<script>'; //here starts creating new array of brands
echo 'var brands = []';
while ($brand=mysql_fetch_assoc($result)) {
echo 'brands.push("'. $brand['brand'] .'")'; //adding new brand to brand array
}
echo '</script>'
?> -->
<script>
//NOTE: a mock for your DB
var brands = ["brand1", "brand2"]; //removes this if your php codes works
</script>
<table class="item_form">
<tr>
<th>serial no.</th>
<th>brand<th>
</tr>
<tr>
<td><input type="text" placeholder="serial no.1" name="serialnoa[]"></td>
<td>
<select name="show_brands[]">
</select>
</td>
</tr>
</table>
<table>
<tr>
<td><a href="#" class="add-row"><div>+ Row</div></td>
<td><a href="#" class="del-row"><div>- Row</div></td>
</tr>
</table>
</body>
</html>尝试用不同的方式来看待它。刚刚添加了一个函数来用PHP查询镜像第一个填充的组合框。
var counter = 2;
$('.add-row2').click(function() {
$(".release_form").append('<tr><td><select name="show_brands[]" id="unique'+counter+'"></select></td><td><input type="text" name="serialnob[]" placeholder="serial no.' +
counter + '"/></td></tr>');
$('#unique'+counter).append($('#unique').html());
counter++;
});