使用JavaScript克隆表单下拉框时点击按钮跳页顶问题求助

跳转问题解决 #

点击按钮跳转页面顶部的问题，根源是按钮的type属性设置错误：
你当前使用的按钮是type="submit"，放在表单内的提交按钮默认会触发表单提交行为，未配置表单action属性时就会重载当前页面，触发跳回顶部的效果。

可以任选以下一种方案修复：

• 方案1：修改按钮类型为普通按钮，完全避免触发表单提交

  <button type="button" class="btn btn-danger" id="clone_button" onclick="repeat()">Add Another</button>
  

• 方案2：在JS逻辑中阻止默认提交行为
  调整JS函数：

  var i = 0;
  var original = document.getElementById('repeatTHIS');
  
  function repeat(e) {
    e.preventDefault();
    var clone = original.cloneNode(true);
    clone.id = "repeatTHIS1" + ++i;
    original.parentNode.appendChild(clone);
  }
  

  同步调整按钮的调用逻辑：

  <button type="submit" class="btn btn-danger" id="clone_button" onclick="repeat(event)">Add Another</button>
  

额外优化建议 #

当前代码存在重复ID的问题：你要克隆的模块里两个下拉框都用了id="inputState"，重复ID不符合HTML规范，也会导致label的for关联失效，建议你在克隆节点的时候同步修改新增节点内部的下拉框ID，避免后续出现功能异常。

内容的提问来源于stack exchange，提问作者Dee