仅追加<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 循环中

希望这对:)有所帮助

Answer 2

Node.appendChild()不会创建副本。它正在移动现有节点 .so 在您的 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>