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

Question

我用来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>

Answer 1

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

希望这可以帮助 ：）