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

Question

我正在创建一个表单。在输入部分，我使用一个表格来组织输入行。当页面加载时，目前只显示一行。如果用户需要额外的行，那么用户点击标签为附加的按钮，它就会克隆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. 我希望能够在选择ID上做类似的事情，即 "countryToVisit" => "countryToVisit_1"。

如果有更好的方法，我也愿意听取。这个输入的 "输出 "是创建一个静态表，在第一列显示所选择的国家，后续的列将取决于这个国家。

Answer 1

你可以直接使用 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列表。帖子的名字就是名字，listarray的指数在括号里，这样你就不用先去游走键和组织它们。

Answer 2

你可以从你的克隆对象中获取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。当然，这取决于你的用例。如果你知道表单元素将被选择，而且你也有数据，那么你自己构建html是有意义的。如果它是完全动态的，而且你无法控制哪些表单控件会出现在那里，你的方法更适合。只要获取所需的元素，并在addtlCountry()中设置id即可。