在我的页面中，我试图添加一个新行，其中包含一个包含来自数据库的值的下拉列表。为此，我使用 Javascript 和 ajax，但是当我单击“添加新行”按钮时，它完美地添加了第一行，但是当我为第二行点击相同的按钮时，添加了一行但下拉菜单为空.你能帮帮我吗？
function addworkexp(row)
{
var rowcount = $("#rowcount").val();
var i;
var row1 = "<tr><td style='border: 0px;'><input type=\"text\" class=\"form-control selectbxwidthsmall\" name=\"employer[]\"></td>";
row1 += "<td style='border: 0px;'><input type=\"text\" class=\"form-control selectbxwidthsmall\" name=\"jobtitle[]\"></td>";
row1 += "<td style='border: 0px;'><select style=\"display: inline-block;width: 80px;\" onchange=\"calculate('" + row + "')\" id=year_from_" + row + " class=\"form-control selectbxwidthsmall\" name=\"year_from[]\">";
row1 += "<option value=\"\">Select</option>";
for (i = 1994; i < 2014; i++)
{
row1 = row1 + "<option value=" + i + ">" + i + "</option>";
}
row1 += "</select>";
row1 += "<span style=\"display: inline-block;\">TO</span>";
row1 += "<select style=\"display: inline-block;width: 80px;\" onchange=\"calculate('" + row + "')\" id=year_to_" + row + " class=\"form-control selectbxwidthsmall\" name=\"year_to[]\">";
row1 += "<option value=\"\">Select</option>";
for (i = 1994; i < 2014; i++)
{
row1 = row1 + "<option value=" + i + ">" + i + "</option>";
}
row1 += "</select>"
row1 += "</td>";
row1 += "<td style='border: 0px;'><select class=\"form-control\" id=industry_" + row + " name=\"industry[]\"></select></td>";
$.ajax({
type: "POST",
url: "../server/getindustry.php",
success: function(data) {
$("#industry_" + row + "").html(data);
}
});
row1 += "<td style='border: 0px;'><input type=\"text\" class=\"form-control\" id=total_exp_" + row + " name=\"total_exp[]\"></td></tr>";
$("#workexp").append(row1);
rowcount = parseFloat(rowcount) + 1;
$("#rowcount").val("");
$("#rowcount").val(rowcount);
}<table id="workexp" class="table">
<tr>
<td style="border: 0px;padding-bottom: 0px;">
<b><?php echo $jbs_workexp_emp_lang; ?><span class="text-error">*</span></b>
</td>
<td style="border: 0px;padding-bottom: 0px;">
<b><?php echo $jbs_workexp_jobtitle_lang; ?><span class="text-error">*</span></b>
</td>
<td style="border: 0px;padding-bottom: 0px;">
<b><?php echo $jbs_workexp_duration_lang; ?></b>
</td>
<td style="border: 0px;padding-bottom: 0px;">
<b><?php echo $jbs_workexp_indus_lang; ?></b>
</td>
<td style="border: 0px;padding-bottom: 0px;">
<b><?php echo $jbs_workexp_totexp_lang; ?><span class="text-error">*</span></b>
</td>
</tr>
<?php for ($row = 0; $row < $rowcount; $row++) { ?>
<tr id="work_<?php echo $row; ?>">
<td style="border: 0px;padding-bottom: 0px;">
<?php $emparr = explode(",", $employercheck); ?>
<input class="form-control selectbxwidthsmall" type="text" name="employer[]" value="<?php echo $emparr[$row]; ?>"><br>
<span class="text-error" ><?php echo $error_msg['employer'][$row]; ?></span>
</td>
<td style="border: 0px;padding-bottom: 0px; width: 134px;">
<?php $jobarr = explode(",", $jobcheck); ?>
<input class="form-control selectbxwidthsmall" type="text" name="jobtitle[]" value="<?php echo $jobarr[$row]; ?>"><br>
<span class="text-error" ><?php echo $error_msg['jobtitle'][$row]; ?></span>
</td>
<td style="border: 0px;padding-bottom: 0px;">
<?php $yearfromarr = explode(",", $yearfromcheck); ?>
<select onchange="calculate('<?php echo $row ?>')" id="year_from_<?php echo $row; ?>" name="year_from[]" class="form-control" style="display: inline-block;width: 78px;">
<option value="">Select</option>
<?php for ($i = 1994; $i < 2014; $i++) { ?>
<option value="<?php echo $i; ?>" <?php if ($i == $yearfromarr[$row]) echo "selected"; ?> ><?php echo $i; ?></option>
<?php } ?>
</select>
<span style="display: inline-block;">TO</span>
<?php $yeartoarr = explode(",", $year_tocheck); ?>
<select onchange="calculate('<?php echo $row; ?>')" id="year_to_<?php echo $row; ?>" class="form-control selectbxwidthsmall" name="year_to[]" style="display: inline-block;width: 78px;">
<option value="">Select</option>
<?php for ($i = 1994; $i < 2014; $i++) { ?>
<option value="<?php echo $i; ?>"<?php if ($i == $yeartoarr[$row]) echo "selected"; ?>><?php echo $i; ?></option>
<?php } ?>
</select> <br>
<span class="text-error" > <?php echo $error_msg['yearfrom'][$row]; ?></span>
<span class="text-error" ><?php echo $error_msg['yearto'][$row]; ?></span>
</td>
<td style="border: 0px;padding-bottom: 0px; width:104px;">
<?php $industryarr = explode(",", $industrycheck); ?>
<select name="industry[]" id="industry_<?php echo $row; ?>" class="form-control">
<option value="">Select</option>
<?php for ($h = 1; $h <= count($industry_id); $h++) { ?>
<option value="<?php echo $industry_id[$h]; ?>" <?php
if ($industry_id[$h] == $industryarr[$row]) {
echo "selected";
}
?>>
<?php echo $industry[$h]; ?></option>
<?php } ?>
</select>
</td>
<td style="border: 0px;padding-bottom: 0px; width:72px;">
<?php $totalexparr = explode(",", $totalexpcheck); ?>
<input type="text" id="total_exp_<?php echo $row; ?>" name="total_exp[]" value="<?php echo $totalexparr[$row]; ?>" class="form-control" style="width:72px;">
</td>
<td style="border: 0px;padding-bottom: 0px;">
<?php $workid = explode(",", $workidheck); ?>
<a href="javascript:void(0)" onclick="DelWorkexp('<?php echo $row; ?>', '<?php echo $workid[$row]; ?>')" class="btn btn-danger">Delete</a>
</td>
</tr>
<?php } ?>
</table>
<table class="table">
<tr>
<td style="border: 0px;padding-bottom: 0px;"><a href="javascript:void(0)" class="btn btn-primary" onclick="addworkexp('<?php echo $row; ?>')">Add Work Experience</a></td>
</tr>
<tr>
<td style="border: 0px;padding-bottom: 0px;">
<input type="hidden" name="rowcount" id="rowcount" value="<?php echo $rowcount; ?>">
<center>
<input class="btn btn-primary" type="submit" name="save" value="Save">
</center>
</td>
</tr>
</table>最佳答案
尝试在 ajax 调用之前先附加行。
$("#workexp").append(row1);
$.ajax({
...
});
这将确保这次调用
$("#industry_" + row + "").html(data);
将成功找到添加数据的下拉列表。
您有任何 javascript 错误或 php 错误吗？
关于javascript - 使用 javascript 添加带有数据库值的下拉框的新行？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37983713/