Question

我是jQuery的新手，在这里我需要添加/删除一组文本框并通过单击按钮连续选择框。添加时我必须使用选项填充相同的选择框。我通过以下代码实现了添加和删除。

============Add=================

var i = 1; 
$("‪#‎add‬").click(function() {
i++;
$(".normal-tble tbody tr:first").clone().find("select,input").each(function() {
var tempId = $(this).attr("id");
$(this).attr("id",$(this).attr("id")+"_"+(i))
var newID = $(this).attr("id");
}).end().appendTo("table");
});
=============Remove===============
$("table.normal-tble").on("click", "‪#‎remove‬", function (event) {
$(this).closest("tr").remove();
i -= 1
});
================code appending===================
<tbody>
<tr class="second">
<td style="text-align:left;"><form:select path="category" class="slt-tbl-small">
<form:option label="Select" value='0' />
<form:options itemLabel="categoryName" itemValue="category" items="${CategoryList}" />
</form:select>
</td>
<td style="text-align:left;"><form:select path="areaID" class="slt-tbl-small">
<form:option label="Select" value='0' />
</form:select>
</td>
<td style="text-align:left;"><form:select path="subAreaID" class="slt-tbl-small">
<form:option label="Select" value='0' />
</form:select>
</td>
<td style="text-align:left;"><form:input path="quantity" class="tfl-tbl-small"/></td>
<td style="text-align:left;"><form:input path="availableBlocks" class="tfl-tbl-small"/></td>
<td style="text-align:left;"><form:input path="utilization" class="tfl-tbl-small"/></td>
<td style="text-align:left;"><form:input path="blkNumComment" class="tfl-small"/></td>
<td style="text-align:left;"><img src="<c:url value="/resources/images/edit.png"/>" width="14" height="13" alt="edit"></td>
<td style="text-align:left;"><img src="<c:url value="/resources/images/edit.png"/>" width="14" height="13" alt="edit" id = "remove"></td>
<td></td>
</tr> 
</tbody>
==================Fetch Data=================
$(this).change(function() {
var value = $(this).val();//this value is not coming for dynamically added select box.
});
});
===================================

基于首选框更改，我必须在其他选择框和文本框中填充值。 1.如何获得动态添加选择框的值？ 2.克隆选择框和文本框后，即使它与之前无法获取值和id相同。是因为克隆（）。

请帮我解决这个问题

Answer 1

使onchange处理程序成为命名函数：

function onChange() {
    var value = $(this).val();
    //...
}
$(this).change(onChange);

在你的add函数中，为新创建的元素添加相同的处理程序：

$(".normal-tble tbody tr:first").clone().find("select,input").each(function() {
    ///...
    $(this).change(onChange);
}).end().appendTo("table");

对于你的另一个问题：
您不应将两个事件处理程序分配给select + input + img。单独做，像这样：

var $row = $(".normal-tble tbody tr:first").clone();
$row.find("select,input").change(onChange); 
$row.find("img").click(onClick);
$row.appendTo("table");

在jquery中获取动态添加的选择框和文本框的值

1 个答案: