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

debugcn 发表于 Dev

用户名

我对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。3.是因为clone（）吗？

请帮我解决这个问题

佐德

使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");

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。