javascript - 使用 javascript 克隆或复制 div

问题描述

我是 JavaScript 新手，当用户单击“添加另一个”按钮时，我试图复制 2 个“下拉选项”字段。我在下面找到的代码实际上并在我像在此处所做的那样隔离它时进行了调整，但是当我插入表单时，它只是弹回页面顶部。不确定是否有人知道这可能是什么。任何想法或帮助表示赞赏。
如果有帮助，我在 codepen 上添加了完整表单的链接

var i = 0;
var original = document.getElementById('repeatTHIS');

function repeat() {
  var clone = original.cloneNode(true);
  clone.id = "repeatTHIS1" + ++i;
  original.parentNode.appendChild(clone);
}

<div id="repeatTHIS">
  <div class="form-row">
    <div class="form-group col-md-6">
      <label for="inputState">Subject*</label>
      <select id="inputState" class="form-control">
        <option selected>--select--</option>
        <option>...</option>
        <option>...</option>
        <option>...</option>
        <option>...</option>
      </select>
    </div>
    <div class="form-group col-md-6">
      <label for="inputState">Obtained Grade*</label>
      <select id="inputState" class="form-control">
        <option selected>--select--</option>
        <option>N/A</option>
        <option class="sub-option-titles" disabled>Grading System</option>
        <option>A</option>
        <option>A*</option>
        <option>B</option>
        <option>C</option>
        <option>D</option>
        <option>E</option>
        <option>F</option>
        <option>G</option>
        <option>U</option>
        <option class="sub-option-titles" disabled>9:1 Grading Structure</option>
        <option>9</option>
        <option>8</option>
        <option>7</option>
        <option>6</option>
        <option>5</option>
        <option>4</option>
        <option>3</option>
        <option>2</option>
        <option>1</option>
        <option class="sub-option-titles" disabled>BTEC qualifications</option>
        <option>Level 2 Distinction(BTEC)*</option>
        <option>Level 2 Distinction(BTEC)</option>
        <option>Level 2 Merit(BTEC)</option>
        <option>Level 2 Pass(BTEC)</option>
        <option>Level 1 Distinction(BTEC)</option>
        <option>Level 1 Merit(BTEC)</option>
        <option>Level 1 Pass(BTEC)</option>
      </select>
    </div>
  </div>
</div>
<button type="submit" class="btn btn-danger" id="clone_button" onclick="repeat()">Add Another</button>

标签： javascripthtmlcss

javascript - 使用 javascript 克隆或复制 div

问题描述

解决方案

推荐阅读