Javascript 对克隆的表单执行操作

我创建了一个包含两个下拉列表的表单，当用户从第一个列表中选择一个项目时，第二个列表的数据将自动更新。我使用jquery来实现这一点，它工作得非常好，只是当我复制表单时，复制表单的下拉列表N°1不再更新下拉列表N°2，因此我想知道如何在克隆表单上执行相同的操作（通过选择在另一个表单中输入的下拉列表来更新下拉列表）并将所有克隆表单的条目保存到数据库中

真诚地

这是我使用的代码

<form id="myForm">
 <div id="clonedSection1" class="clonedSection">    
  <select class="form-control" name="productName[]" id="productName" >
   <option value="0" selected>Selectionner le produit</option>
   <option value="copy">Copie</option>
   <option value="scan">Scan</option>
  </select>
  <select class="form-control" name="productPrice[]" id="quant" disabled>
   <option value="pu" selected>P.U</option>
  </select>
</div>
<div>
 <input type="button" id="btnAdd" value="add another name" />
 <input type="button" id="btnDel" value="remove name" />
</div>

产品选择
科皮
扫描
P.U

$（“#productName”）.change（函数（）{
var val=$（this.val（）；
如果（val=“复制”）{
$（“#quant”）.html（“25$”；
}否则如果（val==“扫描”）{
$（“#quant”）.html（“10$”；
}
});
$（文档）.ready（函数（）{
$（“#btnAdd”）。单击（函数（）{
var num=$（“.clonedSection”）.length；
var newNum=新的数字（num+1）；
var newSection=$（“#clonedSection”+num）.clone（）.attr（“id”，“clonedSection”+newNum）；
newSection.children（“：nth child（5）”）.children（：first”）.attr（“id”，“productName”+newNum）.attr（“name”，“productName[]”+newNum）；
newSection.children（“：nth child（6）”）.children（“：first”）.attr（“id”，“quant”+newNum）.attr（“name”，“productPrice[]”+newNum）；
$（“.clonedSection”）.last（）.append（newSection）
$（“#btnDel”）.attr（“已禁用”）；
});
$（“#btnDel”）。单击（函数（）{
var num=$（“.clonedSection”）.length；//当前有多少个“可复制”输入字段
$（“#clonedSection”+num）.remove（）；//删除最后一个元素
//启用“添加”按钮
$（“#btnAdd”）.attr（“已禁用”）；
//如果只剩下一个元素，请禁用“删除”按钮
如果（num-1==1）
$（“#btnDel”）.attr（“禁用”、“禁用”）；
});
$（“#btnDel”）.attr（“禁用”、“禁用”）；
});

您的代码有一些小问题：

• 对于要克隆的DOM元素，请使用classname而不是id。 这是因为id是唯一的。不同的元素不应共享相同的属性 相同的id。如果克隆id为的元素，则会有元素 共享相同的id
• 对生成的元素使用

  .on（）

  而不是

  .change（）

  动态地
• 我不确定您是否真的要插入新的“clonedSection” 在最后一个“clonedSection”中。如果你不打算这样做 希望在最后一个字段之后插入新的“clonedSection” “clonedSection”，使用

  newSection.insertAfter（$（“.clonedSection”）.last（）

• .attr（“disabled”（）的值应为
  true
  或
  false
  ，但不应为
  ”
  和
  disabled

$（文档）.ready（函数（）{
//对动态生成的元素使用on（）而不是change（）
$（“body”）。在（“change”，“.productName”，function（）{
var_this=$（this）；
var quant=_this.nexist（.clonedSection”）.find（.quant）；
var val=_this.val（）；
如果（val=“复制”）{
html（“25$”）；
}否则如果（val==“扫描”）{
html（“10$”）；
}
});
$（“#btnAdd”）。单击（函数（）{
var num=$（“.clonedSection”）.length；
var newNum=num+1；
var newSection=$（“#clonedSection”+num）.clone（）.attr（“id”，“clonedSection”+newNum）；
newSection.children（“：nth child（5）”）.children（：first”）.attr（“id”，“productName”+newNum）.attr（“name”，“productName[]”+newNum）；
newSection.children（“：nth child（6）”）.children（“：first”）.attr（“id”，“quant”+newNum）.attr（“name”，“productPrice[]”+newNum）；
newSection.insertAfter（$（“.clonedSection”）.last（）；//在最后一个clonedSection之后插入
$（“#btnDel”）.attr（“disabled”，false）；//disabled应为true/false，但不能为“”
});
$（“#btnDel”）。单击（函数（）{
var num=$（“.clonedSection”）.length；
$（“#clonedSection”+num）.remove（）；
$（“#btnAdd”）.attr（“禁用”，false）；
如果（num-1==1）
$（“#btnDel”）.attr（“禁用”，真）；
});
$（“#btnDel”）.attr（“禁用”，真）；
});

产品选择
科皮
扫描
P.U
我编写了简单明了的代码。

遵循以下步骤：

不要使用ID，因此需要使用类名而不是ID，因为
ID
应该是唯一的
如果动态追加元素，则需要使用
.on（）
而不是
.change（）
方法
。克隆节
节应与
添加按钮
分开
每次通过
选择
克隆元素
。克隆节>div:nth child（1）
此
nth child
方法
通过onchange
.product name
类在输入字段中设置值
通过onclick
.btn Remove
类删除元素
当通过
append（）
方法附加克隆元素时，然后
选择
+
输入
值需要设置
null
，这样您可以在我的jQuesy代码中看到，也可以看到注释文本



我希望下面的片段能对你们有所帮助


$（文档）.on（'click'，'btnAdd'，function（）{
//使用clone（）方法进行克隆，并为删除部分添加删除按钮
var cloneElement=$（'.cloned section>div:n子级（1'））.clone（）；
cloneElement.append（“×；”）；
//选择值集零（0）
cloneElement.find（'select'）.val（0）；
//输入值设置为空
cloneElement.find（'input'）.val（''）；
$（'.ClonedSection'）.append（cloneElement）；
});
//更改产品名称，然后在价格字段中设置价格
$（文档）.on（'change'，'productname'，function（）{
var getValue=$（this.val（）；
$（this.parent（）.find（'.product price'）.val（getValue+'%'）；
});
//单击删除按钮并删除产品/价格部分
$（文档）.on（'click'，'.btn remove'，function（）{
$（此项）。父项(
<!-- script that allows you to modify the data in a drop-down list when an item is selected in another-->
<script type="text/javascript">
 $("#productName").change(function () {
  var val = $(this).val();
  if (val == "copy") {
  $("#quant").html("<option value='25'> 25$ </option>");
 } else if (val == "scan") {
  $("#quant").html("<option value='50'> 10$ </option>");
 }
});
</script>

<!-- script that clones the form-->
<script type="text/javascript">
 $(document).ready(function() {
 $("#btnAdd").click(function() {
  var num = $(".clonedSection").length;
  var newNum  = new Number(num + 1);

  var newSection = $("#clonedSection" + num).clone().attr("id", "clonedSection" + newNum);
  newSection.children(":nth-child(5)").children(":first").attr("id", "productName" + newNum).attr("name", "productName[]" + newNum);
  newSection.children(":nth-child(6)").children(":first").attr("id", "quant" + newNum).attr("name", "productPrice[]" + newNum);

  $(".clonedSection").last().append(newSection)
  $("#btnDel").attr("disabled","");

  });
  $("#btnDel").click(function() {
  var num = $(".clonedSection").length; // how many "duplicatable" input fields we currently have
        $("#clonedSection" + num).remove();     // remove the last element

        // enable the "add" button
        $("#btnAdd").attr("disabled","");

        // if only one element remains, disable the "remove" button
        if (num-1 == 1)
            $("#btnDel").attr("disabled","disabled");
    });

    $("#btnDel").attr("disabled","disabled");
  });
</script>