Question

每当我点击按钮＆＃34; Anadir＆＃34;时，我希望能够将项目添加到列表中（复制其名称和消费）。我有以下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>

许多其他选择......

<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>

HTML中有更多代码，但不相关。我想要做的就是添加所选的＆＃34; aparato＆＃34;选项名称及其＆＃34; consumototalkwh＆＃34;进入divs＆＃34; nameEquip＆＃34;和＃34; consumoEquip＆＃34;，每次我点击＆＃34; Anadir＆＃34;按钮。

有人可以帮我吗？这是我对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;
}

像这样，它正确复制了第一个选定的值，但是如果我更改选择并再次单击＆＃34; Anadir＆＃34;，我之前的选择将被新的选择覆盖。如何在不丢失之前选择的情况下添加？

Answer 1

您没有正确获取下拉选项名称...

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

JavaScript：在按钮单击时将所选项添加到列表中

1 个答案: