javascript - 如何将此多点表单制作成数组

Question

我在这个 fiddle 上有一个多点表单:这是 a link ! .这种形式只能添加3次multidrop，我想一直添加这个multidrop，以及如何将数组数据保存到sql中

<div id="Yes1">
<label for="name" >Name</label>
<input type="text" id="name1" name="name1">
<br><br>
<label for="multiDrop" >Multi Drop</label>
<select name="multiDrop1" id="multiDrop1">
<option value=""></option>
<option value="Y">YES</option>
<option value="N">NO</option>
</select>
<br><br>
</div>

Answer 1

勾选此处以根据您的要求添加和删除您的元素。
您只能删除您选择否的 block 。

$(document).ready(function() {
  $(document).on("change", ".multidrop", function() {
    if ($(this).val() == 'Y') {
      $clone = $(this).closest(".Yes").clone();
      var num = parseInt($(".Yes:last").attr("data-index")) + 1;
      $clone.attr("data-index", num);
      $clone.attr("id", $clone.attr("id").replace(/\d+/, num));
      $clone.find("input,select").each(function() {
        var name = ($(this).attr("name")).replace(/\d+/, num);
        var id = ($(this).attr("id")).replace(/\d+/, num);
        $(this).attr("name", name);
        $(this).attr("id", id);
      });
      $clone.insertAfter(".Yes:last"); //Add field html
    } else if ($(this).val() == "N" && $(".Yes").length > 1) {
      $(this).closest(".Yes").remove();
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="Yes1" class="Yes" data-index="1">
  <label for="name">Name</label>
  <input type="text" id="name1" name="name1" class="name">
  <label for="multiDrop">Multi Drop</label>
  <select name="multiDrop1" id="multiDrop1" class="multidrop">
    <option value="">Select Option</option>
    <option value="Y">YES</option>
    <option value="N">NO</option>
  </select>
  <br><br>
</div>