使用带有来自数据库的值的下拉框添加新行使用javascript?

时间:2016-06-23 06:21:07

标签: javascript php mysql ajax

在我的页面中,我尝试添加一个带有下拉列表的新行,其中包含数据库中的值。为此,我使用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);
    }
&#13;
<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>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:0)

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

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

这将确保此次通话

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

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

你有任何javascript错误或php错误吗?