javascript - 对克隆表单执行操作

Question

我创建了一个包含两个下拉列表的表单，当用户从第一个列表中选择一个项目时，第二个列表的数据会自动更新。我使用 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>

<!-- 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>

Answer 1

我编写了简单干净的代码。

按照以下步骤操作:

1. 不要使用 ID，因此您需要使用类名而不是 id，因为 ID应该是唯一的。
2. 如果动态附加元素则需要使用.on()而不是.change()方法。
3. .cloned-section部分应与 Add Button 分开.
4. 每次选择clone element通过.cloned-section>div:nth-child(1)这个nth-child方法。
5. 通过 onchange 设置输入字段的值 .product-name类。
6. 通过 onclick 删除元素 .btn-remove类。
7. 当通过 append() 附加克隆元素时然后方法select + input需要设置值null所以你可以在我的 jQuesy 代码中看到，也可以看到注释文本。

我希望下面的代码片段对您有很大帮助。

$(document).on('click', '#btnAdd', function(){
  // Make clone by clone() method and append REMOVE button for remove section
  var cloneElement = $('.cloned-section>div:nth-child(1)').clone();
      cloneElement.append('<button type="button" class="btn btn-danger btn-remove"><span aria-hidden="true">&times;</span></button>');
  // Select value set Zero (0)
  cloneElement.find('select').val(0);
  // Input value set empty
  cloneElement.find('input').val('');
  $('.cloned-section').append(cloneElement);
});

// On change product name then set price on price field
$(document).on('change', '.product-name', function(){
  var getValue = $(this).val();
  $(this).parent().find('.product-price').val(getValue+'%');
});

// Click on Remove button and delete product/price section
$(document).on('click', '.btn-remove', function(){
  $(this).parent().remove();
});

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

<div class="container my-2">
  <div class="row">
    <div class="col-sm-12">
      <form class="form-inline" id="myForm">
        <div class="cloned-section w-100">
          <div class="w-100 mt-2">    
            <select class="form-control w-50 product-name" name="productName[]">
              <option value="0" selected>Select Product</option>
              <option value="25">Copy</option>
              <option value="50">Scan</option>
              <option value="75">Paste</option>
              <option value="100">Cut</option>
           </select>
           <input class="form-control w-25 product-price text-center" name="productPrice[]" readonly>
         </div>
       </div>
      <div class="w-100 mt-2">
        <button type="button" id="btnAdd" class="btn btn-success">Add Another Name</button>
      </div>
    </form>
   </div>
  </div>
</div>