附加 <option> 仅附加到列表中的最后一个元素答案

【问题标题】：Appending <option> only appending to last element in list附加 <option> 仅附加到列表中的最后一个元素
【发布时间】：2017-10-18 05:13:08
【问题描述】：

我使用querySelectorAll 选择2 个select 元素。然后，我将一个新创建的 <option> 元素附加到两个 <select> 元素。

但是，由于某种原因，只有最后一个元素附加了选项，第一个元素由于某种原因被忽略了。

这是我的代码：

displayLoading() {
    let dropdowns = document.querySelectorAll('[data-search-select]');
    let loadingOption = document.createElement('option');
    loadingOption.innerHTML = 'Loading...';

    for(let i = 0; i < dropdowns.length; i++) {
        dropdowns[i].disabled = true;
        dropdowns[i].innerHTML = '';
        dropdowns[i].appendChild(loadingOption);
    }
}

这是 HTML：

<div class="formgroup">
    <label class="dropdown-search__label">Choose a make:</label>
    <select name="dropdown-search__select--make" id="dropdown-search__select--make" data-search-select="make">
    </select>
</div>

<div class="formgroup last">
    <label class="dropdown-search__label">Choose a model:</label>
    <select name="dropdown-search__select--model" id="dropdown-search__select--model" data-search-select="model">
    </select>
</div>

【问题讨论】：

标签： javascript html

【解决方案1】：

Node.appendChild() 没有创建副本。它正在移动现有节点。所以在您的 for 循环中，它将选项添加到第一个选择，然后将其移动到第二个，依此类推。因此，而不是创建两个选项元素和附加到每个选择：

displayLoading();

function displayLoading() {
    let dropdowns = document.querySelectorAll('[data-search-select]'); 
    for(let i = 0; i < dropdowns.length; i++) {
      
        let loadingOption = document.createElement('option');
        loadingOption.innerHTML = 'Loading...';
      
        dropdowns[i].disabled = true;
        dropdowns[i].innerHTML = '';
        dropdowns[i].appendChild(loadingOption);
    }
}

<div class="formgroup">
    <label class="dropdown-search__label">Choose a make:</label>
    <select name="dropdown-search__select--make" id="dropdown-search__select--make" data-search-select="make">
    </select>
</div>

<div class="formgroup last">
    <label class="dropdown-search__label">Choose a model:</label>
    <select name="dropdown-search__select--model" id="dropdown-search__select--model" data-search-select="model">
    </select>
</div>

【讨论】：

【解决方案2】：

您正在创建一个 option 元素并尝试将其添加到两个不同的选择中。第二次尝试添加元素时，您会抓住唯一的选项，从当前选择中删除并放入新选择中。您应该创建两个选项元素，也许将该行移到 for 循环中

希望这会有所帮助:)

【讨论】：

我不能两次使用同一个元素吗？像作为参考还是什么？
@MartynBall 不，每个 dom 元素都是自己的东西