如何使这个多点形式的数组

Question

我在这个小提琴上有一个多点形式：这是a link！ 。在这种形式下只能添加多点3次，我想总是添加这个多点，以及如何将数组数据保存到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

我建议使用以下方法：

• 将重复的块HTML转换为变量;
• 听取下拉的变化（使用事件委托，通过class而不是id选择）;
• 基于全局计数器修改必要的属性（名称，id等）以区分这些动态块;

const block = `
	<div class="block">
		<div class="yes">
			<label>Name</label>
			<input type="text" class="name"></input>
			<label>Multi Drop</label>
			<select class="multiDrop">
				<option value=""></option>
				<option value="Y">YES</option>
				<option value="N">NO</option>
			</select>
		</div>
	</div>
`;
const addAnotherBlock = () => {
  $('#wrapper').append(block);
  $('.name:last').attr('name',i++);
};
var i = 0;

$(document).ready(() => addAnotherBlock());

$('#wrapper').on('change', '.multiDrop', function(){
	if($(this).val() == 'Y') addAnotherBlock();
  else if($(this).val() == 'N' && $('.block').length > 1 && !$(this).closest('.block').is('.block:last')){
    $(this).closest('.block').remove();
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="wrapper"></div>

Answer 2

选中此处可根据您的要求添加和删除元素。 您只能删除您选择No的块。

$(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>