JavaScript:单击按钮将选定的项目添加到列表中
JavaScript:单击按钮将选定的项目添加到列表中
提问于 2017-10-23 21:15:04
当我单击"Anadir“按钮时，我希望能够将一项添加到列表中(复制其名称和消费)。我有以下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中有更多的代码，但与之无关。我要做的就是分别在divs "nameEquip“和"consumoEquip”中添加所选的"aparato“选项名及其”consumo极大值“，每次单击"Anadir”按钮。
有人能帮我吗？以下是我对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;
}就像这样，它正确地复制了第一个选定的值，但是如果我更改了选择并再次单击"Anadir"，我以前的选择将被新的选项覆盖。如何在不丢失先前选择的情况下添加？
回答 1
Stack Overflow用户
回答已采纳
发布于 2017-10-23 21:27:56
你没有得到正确的下拉选项名..。
var dropdown = document.getElementById('aparato');
var optionName = dropdown.options[dropdown.selectedIndex].getAttribute('name');页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/46898671
复制相关文章
相似问题
腾讯云开发者
