JavaScript：单击按钮将选定的项目添加到列表

Question

I want to be able to add an item to a list (copy its name and its consumption) whenever I click the button "Anadir". I have the following HTML:

<form name="calcEquipo">
<table>
<tr>
  <td align="center" bgcolor="#F4F4F4"><select name="aparato" id="aparato" onchange="copiaValor();" size="1">
    <option value="">Seleccione una opción</option>
    <option value="18.22" name="Aire inverter">Aire inverter (12,000 btu)</option>
    <option value="22.97" name="Aire mini split">Aire mini split (12,000 btu)</option>
    <option value="2.10" name="Abanico de techo">Abanico de techo</option>
    <option value="0.48" name="Reproductor Blu-Ray">Reproductor Blu-Ray</option>
    <option value="0.14" name="Mini componente">Mini componente</option>

Many other options...

<tr>
<td colspan="2" align="center" bgcolor="#25AE77"><h3>El consumo mensual del equipo será de:</h3>
</td>
</tr>
<tr>
<td colspan="2" align="center" bgcolor="#D4D4D4"><input type="text" name="consumototalkwh" id="consumototalkwh" size="12" readonly>
</td>
</tr>
<tr>
<td colspan="2" align="center" bgcolor="#F4F4F4"><input type="button" value="Añadir" onclick="anadirEquipo();" style="width: 165px; height: 50px; font-size: 16px;"/></td>
</td>
</tr>
<tr><td colspan="2" align="center" bgcolor="#25AE77">Equipos añadidos</td>
</tr>
<tr>
  <td align="center" bgcolor="#F4F4F4"><div id="nameEquip"></div></td>
  <td align="center" bgcolor="#F4F4F4"><div id="consumoEquip"></div></td>
</tr>
<tr>
<td colspan="2" align="center" bgcolor="#F4F4F4"><input type="button" value="Retirar" onclick="retirarEquipo();" style="width: 100px; height: 30px; font-size: 10px;"/>
</td>  
</tr>
</table>
</form>

There is more code in HTML but its not relevant. All I want to do is to add the selected "aparato" option name and its "consumototalkwh" into the divs "nameEquip" and "consumoEquip", respectively, everytime I click the "Anadir" button.

Can someone help me with this? Here is my failed attempt on JS:

function anadirEquipo () {

  var dropdown = document.getElementById('aparato')
  var optionName = document.getElementById('aparato').options[dropdown.selectedIndex].getAttribute('name')
  var kwh=document.getElementById("consumototalkwh").value;
  var container1=document.getElementById("nameEquip");
  var container2=document.getElementById("consumoEquip");


  document.getElementById("nameEquip").innerHTML=optionName;
  document.getElementById("consumoEquip").innerHTML=kwh;
}

Like this, it copies correctly the first selected value, but if I change the selection and click again on "Anadir", my previous choice will be overwritten by the new one. How can I add without losing the previous selections?

Answer 1

You are not getting the drop down option name correctly...

var dropdown = document.getElementById('aparato');
var optionName = dropdown.options[dropdown.selectedIndex].getAttribute('name');