Question

所以我尝试了一些东西，并没有真正到达任何地方。经过广泛的谷歌搜索后，我决定寻求SO大师的帮助。

想法：在点击按钮上复制下拉列表和输入字段（可以是任意次）

解决方案： JavaScript点击侦听器，它会获取现有div的副本并创建一个新的。

问题：当使用下拉列表和输入字段克隆div时，JavaScript代码不会更改子元素的ID，使得下拉列表无法使用（它们可以与之交互但我无法使用来自他们的数据）。

如果有人想玩它，我已经制作了JSFiddle。

HTML：

            <div id="row-container">
                <div id="profile-row0">
                    <select id="select-item0" class="selectpicker" data-live-search="true">
                        <option>id</option>
                        <option>email</option>
                        <option>phone</option>
                    </select>
                    <input id="select-item-value0" class="select-item-value" placeholder="Item value"/>
                </div>
            </div>

            <button id="add-button"> GO </button>

JS：

document.getElementById("add-button").addEventListener("click", addItemRow);

var i = 0;

function addItemRow(){
    var original = document.getElementById('profile-row' + i);
    var clone = original.cloneNode(true);
    clone.id = "profile-row" + ++i;
      //clone.firstChild.id = "select-item" + ++i;
      //clone.lastChild.id = "select-item-value" + ++i;
    original.parentNode.appendChild(clone);
}

我尝试的最后一件事在JavaScript代码中被注释掉了。

Answer 1

你的代码几乎可以运作，但是你错过了一件事：第一个和最后一个元素不是你要找的那些（这些不是机器人......抱歉，我无法帮助它）。第一个和最后一个元素是#text个节点，而不是HtmlElement个节点。

您可以修改代码以使其正常工作：

function addItemRow(){
    var original = document.getElementById('profile-row' + i);
    var clone = original.cloneNode(true);
    i++;
    clone.id = "profile-row" + i;
    clone.getElementsByTagName('select')[0].id = "select-item" + i;
    clone.getElementsByTagName('input')[0].id = "select-item-value" + i;
    original.parentNode.appendChild(clone);
}

Answer 2

您可以使用childNodes获取新克隆的元素。然后使用document.getElementById("add-button").addEventListener("click", addItemRow); var i = 0; function addItemRow() { var original = document.getElementById('profile-row' + i); var clone = original.cloneNode(true); var updatedId = "profile-row" + ++i; clone.id = updatedId; original.parentNode.appendChild(clone); var cloneChild = document.getElementById(updatedId).childNodes; console.log(cloneChild) cloneChild[1].id = "select-item" + (i + 1); cloneChild[3].id = "select-item-value" + (i + 1); }它将给出一个数组。选择数组索引后，您可以更新ID

<div id="row-container">
  <div id="profile-row0">
    <select id="select-item0" class="selectpicker" data-live-search="true">
                        <option>id</option>
                        <option>email</option>
                        <option>phone</option>
                    </select>
    <input id="select-item-value0" class="select-item-value" placeholder="Item value" />
  </div>
</div>

<button id="add-button"> GO </button>

controlTextDidChange

克隆元素时，在JavaScript中更改子元素的ID

2 个答案: