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>

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

2 个答案: