在上图中,我正在创建动态行(工作正常)。但是,我然后包括了根据“ Desc:”左侧的下拉列表中选择的内容填充“ Desc:”文本框的功能。这对于第一行工作正常,但此后所有其他行均无效。 这是我用于添加和删除行的javascript代码(效果很好):
<script type="text/javascript">
$(function(){
function initTemplates() {
$('.template').each(function () {
var template = $(this).children(),
key = template.attr('class') || 'template' + templates.length;
templates[key] = template;
$(this).remove();
});
}
var templates = {};
initTemplates();
//when the Add Field button is clicked
$("#add").click(function () {
$('#items').append(templates['emp_detail'].clone());
});
//function on Delete button
$(document).on('click', '.delete', function () {
$(this).parent().remove();
});
});
</script>
以下是用于从mySQL DB中提取数据并填充下拉列表的代码(php和HTML):
<div class="template">
<div class="emp_detail">
<script type="text/javascript">
$(document).ready(function(){
$("#sel_depart").change(function(){
var deptid = $(this).val();
$.ajax({
url: 'getUsers.php',
type: 'post',
data: {depart:deptid},
dataType: 'json',
success:function(response){
var len = response.length;
$("#sel_user").empty();
for( var i = 0; i<len; i++){
var PartNumber = response[i]['PartNumber'];
$("#sel_user").empty().append("<input type=text value='"+PartNumber+"' size=20 name=PartNumber[]>");
}
}
});
});
});
</script>
<span width=100%>
<table border="0" cellpadding=0 cellspacing=0 width="100%">
<tr>
<td style='white-space:nowrap;'>
<input type="button" class="delete" value="Delete">
<label><font style="font-size:11px;"><b>Part: </b></label><input type="text" class="small" name="BX_ProductName[]" size="20">
<label><font style="font-size:11px;color:#D41118;"><b>OR </font></label>
<select name="Prod1[]" id="sel_depart">
<option>Select Pre-Loaded Part...</option>
$sql = "SELECT DISTINCT ProductName, id FROM table_name GROUP BY ProductName ORDER BY ProductName ASC";
$sql_result = mysql_query($sql,$connection);
while ($row = mysql_fetch_array($sql_result))
{
$id = $row['id'];
$ProductName = $row['ProductName'];
echo"<option value=\"$id\">$ProductName</option>";
}
mysql_close($connection);
?>
<label for="PartNumber"><font style="font-size:11px;"><b>Desc: </b></label><span id="sel_user"><input type="text" class="small" name="PartNumber[]" size="20"></span>
<label for="AmountOrdered"><font style="font-size:11px;"><b>Qty: </b></label><input type="text" required="required" class="small" name="AmountOrdered[]" size="5">
<label for="build"><font style="font-size:11px;"><b>Build#: </b></label><input type="text" required="required" class="small" name="build[]" size="10">
<label for="unit_cost"><font style="font-size:11px;"><b>Unit$: </b></label><input type="text" class="small" name="unit_cost[]" size="10">
<label for="total_cost"><font style="font-size:11px;"><b>Total$: </b></label><input type="text" class="small" name="total_cost[]" size="10">
<label><font style="font-size:11px;"><b>Date: </b></label><input type="text" class="emp_from" name="ExpectedDate[]" size="10">
</td>
</tr>
</table>
</span>
</div>
</div>
<div id="items">
</div>
这是getUsers.php文件:
$host = "localhost"; /* Host name */
$user = "username"; /* User */
$password = "password"; /* Password */
$dbname = "db_name"; /* Database name */
$con = mysqli_connect($host, $user, $password,$dbname);
// Check connection
if (!$con) {
die("Connection failed: " . mysqli_connect_error());
}
$departid = $_POST['depart'];
$sql = "SELECT id, PartNumber FROM table_name WHERE id = ".$departid;
$result = mysqli_query($con,$sql);
$users_arr = array();
while( $row = mysqli_fetch_array($result) ) {
$PartNumber = $row['PartNumber'];
$userid = $row['id'];
$users_arr[] = array("PartNumber" => $PartNumber);
}
// encoding array to json format
echo json_encode($users_arr);