javascript - 使用 javascript 添加带有数据库值的下拉框的新行？

Question

在我的页面中，我试图添加一个新行，其中包含一个包含来自数据库的值的下拉列表。为此，我使用 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>

Answer 1

尝试在 ajax 调用之前先附加行。

$("#workexp").append(row1);
$.ajax({
    ...
});

这将确保这次调用

$("#industry_" + row + "").html(data);

将成功找到添加数据的下拉列表。

您有任何 javascript 错误或 php 错误吗？