<option>をリストの最後の要素に追加するだけです

Question

私はquerySelectorAllを使用して2 select要素を選択します。次に、新しく作成した<option>要素を2つの<select>要素に追加します。

しかし、何らかの理由で最後の要素だけにオプションが追加されていると、何らかの理由で最初の要素が無視されます。

<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

Node.appendChild()が、それはループのためにあなたの既存のノードの.soを移動さcopy.Itを作成されていないループの

希望にそのラインを移動、オプション要素を作成する必要がありますそれを移動させる第2及びこれの代わりに、二つのオプション要素を作成し、それぞれに追加の。だから上の第一選択するオプションを追加選択：

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>

Answer 2

あなたは1つのoption要素を作成し、二つの異なる選択に追加しようとしている。

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です：

は、ここに私のコードです。 2回目に要素を追加しようとすると、唯一のオプションを取得し、現在の選択から削除して新しい要素に配置します。あなたは多分これが役立ちます:)