在同一循环中多个阑尾呼叫

Question

listCities.forEach(function(city){
   let option = document.createElement('option');
   option.value = city;
   listFrom.appendChild(option);
   listTo.appendChild(option);

}）;

我有一个数组，我想将每个字符串作为选项添加到两个数据师（列表From和ListTo）中。问题在于，无论我输了什么顺序，只有列表中的最后一个将选项添加到它们中。

有没有办法在相同的foreach循环中执行此操作，或者我必须创建两个不同的循环来完成完全相同的事情。

我只是很难理解其背后的逻辑。

Answer 1

附录时，您将元素移至最后提到的容器，因为该元素仅存在一次。

这比创建一个选项，克隆并添加两次要快得多：

const listCities = ["Buenos Aires","Cordoba","Rosario","Mendoza","La Plata","Tucumán","Mar del Plata","Salta","Santa Fe","San Juan","Resistencia","Santiago del Estero","Corrientes","Neuquén","Posadas","San Salvador de Jujuy","Bahía Blanca","Paraná","Formosa","San Fernando del Valle de Catamarca","San Luis","La Rioja","Comodoro Rivadavia","Río Cuarto"], 
  listFrom = document.getElementById("from"), 
  listTo   = document.getElementById("to");

const options = listCities
  .map(city => `<option value="${city}">${city}</option>`)
  .join("");
listFrom.innerHTML += options;
listTo.innerHTML   += options;

<select id="from"><option value="">From city</option></select> <select id="to"><option value="">To city</option></select>

Answer 2

一个元素只能在一个地方存在。您需要制作一个 clone> clone

const listFrom = document.querySelector('#from');
const listTo = document.querySelector('#to');

listCities = ["a","b","c","d"];

listCities.forEach(function(city){
   let option = document.createElement('option');
   option.textContent = city;
   option.value = city;
   listFrom.appendChild(option);
   listTo.appendChild(option.cloneNode(true));
});

<label for="from">From:</label><select id="from"></select>
<label for="to">To:</label><select id="to"></select>