如何在 javascript 克隆中访问底层元素的 ID？

Question

我正在创建一个表单。在输入部分，我使用 table 来组织输入行。当页面加载时，当前显示一行。如果用户需要额外的行，则用户单击标记为额外的按钮并克隆 div。我已经能够更改创建的每个附加 div 的 ID，但我还需要更改基础元素的 ID。这是 html 部分：

<table id="input_values">
    <tr id="addtl_country_0">
        <td>
            <select name="countryToVisit" id="countryToVisit" required="">
                <option selected disabled value="select-country">Select Country</option>
                <option value="uk">United Kingdom</option>
                <option value="germany">Germany</option>
                <option value="chinahk">China/Hong Kong</option>
            </select>
        </td>
    </tr>
</table>

到目前为止，对于 JavaScript 部分，我有：

let countriesCounter = 1;

function addtlCountry() {
    let addtlRow = document.getElementById('addtl_country_0');
    let table = document.getElementById('input_values');
    let clone = addtlRow.cloneNode(true);
    clone.id = "addtl_country_" + countriesCounter;
    table.appendChild(clone);

    countriesCounter++;
}

对于我目前拥有的 javascript，每个额外的 div id 都会更改：addtl_country_0 => addtl_country_1。我希望能够使用 select ID 做类似的事情，即 "countryToVisit" => "countryToVisit_1".

如果有更好的方法，我也愿意听取意见。此输入的 "output" 是创建一个静态 table，在第一列中显示所选国家/地区，后续列将取决于该国家/地区。

Answer 1

您可以从克隆对象中获取 select 元素，然后更新它的 ID。这是示例代码，您可以将其扩展为通用 fn

function addtlCountry() {
    let addtlRow = document.getElementById('addtl_country_0');
    let table = document.getElementById('input_values');
    let clone = addtlRow.cloneNode(true);
    var select = clone.getElementsByTagName('select');
    select[0].id = select[0].id + "_1";
    table.appendChild(clone);    
    updateId(clone.childNodes);
    
    countriesCounter++;
}

其他选项不是克隆现有对象，您可以使用一个函数来为您生成所需的 html。在这里您可以根据需要设置 ID。这当然取决于您的用例。如果您知道表单元素将是 select 并且您也有数据，那么您自己构建 html 是有意义的。如果它是完全动态的并且您无法控制那里的表单控件，那么您的方法更适合。只需获取所需的元素并在 addtlCountry()

中设置 id

Answer 2

您可以只使用 clone 并设置其属性。

let countriesCounter = 1;

document.getElementById("add-line").addEventListener("click", addtlCountry);

function addtlCountry() {
    let addtlRow = document.getElementById('addtl_country_0');
    let table = document.getElementById('input_values');
    let clone = addtlRow.cloneNode(true);

    clone.id = "addtl_country_" + countriesCounter;
    const select = clone.querySelector("#countryToVisit");
    select.id = "countryToVisit_" + countriesCounter;
    // or change to "countryToVisit[" + countriesCounter + "]"
    select.name = "countryToVisit_" + countriesCounter;

    table.appendChild(clone);
    countriesCounter++;
}

<table id="input_values">
    <tr id="addtl_country_0">
        <td>
            <select name="countryToVisit" id="countryToVisit" required="">
                <option selected disabled value="select-country">Select Country</option>
                <option value="uk">United Kingdom</option>
                <option value="germany">Germany</option>
                <option value="chinahk">China/Hong Kong</option>
            </select>
        </td>
    </tr>
</table>
<button type="button" id="add-line">Add</button>

PS：您可以将您的 ~~id 从 addtl_country_0 更改为 addtl_country[0]~~ 名称以使用 country[0]。这样您将在后端获得 array/list 。 post 名称是名称，list/array 的索引采用 brackets.This 方式，您不必先遍历键并组织它们。

如何在 javascript 克隆中访问底层元素的 ID？

How to access an underlying element's ID inside of a javascript clone?

javascript

html

dom

setattribute