我的目的是当我更改选择选项时使用js设置输入的值。但它的值未定义
这是我的 html (jsp) 文件。
<body>
<center><h1>Ventas</h1>
<table border="2">
<tr>
<th>Producto</th>
<th>Precio</th>
</tr>
<tr>
<th>
<select name="productos" onchange="ponerPrecio(event)">
<c:forEach items="${product}" var="prdct">
<option value="${prdct.idProducto}" data="${prdct.precioUnidad}">${prdct.nombre}</option>
</c:forEach>
</select>
<td><input type="text" name="precio" id="price" value="" readonly></input></td>
</th>
</ tr>
<script>
function ponerPrecio(e) {
var precio = e.target.data;
document.getElementById("price").value = precio ;
}
</script>
</table>
<input type="button" name="begin" value="Inicio"onclick="window.location.href='principal.htm'" />
</center>
</body>
从 ${product} 我得到了我的数据库的所有项目来使用它。这个想法是使用“data”来更新名称为precio的输入，其值为${prdct.precioUnidad}。
最佳答案
使用data-price而不是data属性
<center>
<h1>Ventas</h1>
<table border="2">
<tr>
<th>Producto</th>
<th>Precio</th>
</tr>
<tr>
<th>
<select name="productos" onchange="ponerPrecio(event)">
<c:forEach items="${product}" var="prdct">
<option value="${prdct.idProducto}" data-price="${prdct.precioUnidad}">${prdct.nombre}</option>
<option value="2" data-price="10">Custom Item</option>
</c:forEach>
</select>
</th>
<td><input type="text" name="precio" id="price" value="" readonly></input></td>
</tr>
</table>
<input type="button" name="begin" value="Inicio" onclick="window.location.href='principal.htm'" />
<script>
function ponerPrecio(e) {
var precio = e.target.options[e.target.selectedIndex].dataset.price;
document.getElementById("price").value = precio;
}
</script>
</center> 关于javascript - 无法使用 js 更新事件的文本字段 - 未定义，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60244249/