我正在尝试从下拉菜单中获取单个值。这些值已添加到html中一个未知大小的表中。我想计算一下这些饮料的总价。如果我在数据库中添加一种新饮料，代码应该能够计算出新饮料的价格。
我想参考每个单独的下拉菜单来计算单独的数量，这在html中可能吗？
如果没有，在java脚本中是否有引用每一个的方法？
在python中，我知道你可以将它们全部添加到一个数组中，并处理数组中的每个项，但是<我不知道如何在java脚本和html中做到这一点。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Beverages</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
rel="stylesheet"
/>
<link rel="stylesheet" href="stylesheets/style.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<!-- Navbar -->
<div class="wa-top">
<div class="wa-bar wa-blue wa-card wa-right-align wa-large">
<a class="wa-bar-item wa-button wa-hide-medium wa-hide-large wa-right wa-padding-large wa-hover-white wa-large wa-blue" href="javascript:void(0);" onclick="myFunction()" title="Toggle Navigation Menu"><i class="fa fa-bars"></i></a>
<a href="#" class="wa-bar-item wa-button wa-padding-large wa-white">Home</a>
<a href="#" class="wa-bar-item wa-button wa-hide-small wa-padding-large wa-hover-white">Beverages</a>
<a href="#" class="wa-bar-item wa-button wa-hide-small wa-padding-large wa-hover-white">Link 2</a>
<a href="#" class="wa-bar-item wa-button wa-hide-small wa-padding-large wa-hover-white">Link 3</a>
<a href="#" class="wa-bar-item wa-button wa-hide-small wa-padding-large wa-hover-white">Link 4</a>
<div class="logo"><a href="../home.html" class="wa-logo"><img src="images/17GLogo.png" alt="17g Webapp" /></a></div>
<!-- Navbar on small screens -->
<div id="navDemo" class="wa-bar-block wa-white wa-hide wa-hide-large wa-hide-medium wa-large">
<a href="#" class="wa-bar-item wa-button wa-padding-large">Link 1</a>
<a href="#" class="wa-bar-item wa-button wa-padding-large">Link 2</a>
<a href="#" class="wa-bar-item wa-button wa-padding-large">Link 3</a>
<a href="#" class="wa-bar-item wa-button wa-padding-large">Link 4</a>
</div>
</div>
<div class="container mt-5">
<% if (messages.success) { %>
<p class="alert alert-success mt-4"><%- messages.success %></p>
<% } %>
<br />
<table class="table">
<thead>
<tr>
<th scope="col">#Id</th>
<th scope="col">Name</th>
<th scope="col">Price</th>
<th scope="col">Quantity</th>
</tr>
</thead>
<tbody>
<% if(data.length){ for(var i = 0; i< data.length; i++) {%>
<tr>
<th scope="row"><%= (i+1) %></th>
<td><%= data[i].name%></td>
<td>$ <%= data[i].price%></td>
<td>
<form action="insertlabel.php" id="privtelabel" method="POST">
Product:
<label for="beverages"></label>
<select name="beverages" id="beverages">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<br> Quantity: <input type="text" name="quantity" id='quantity' required><br> Size:
<select name='size' id='size'>
<option value="Regular Milk">Regular Milk</option>
<option value="Oat Milk">Oat Milk</option>
<option value="Light Milk">Light Milk</option>
</select>
<p></p>
Price: <span id="totalCost"></span>
</form>
</td>
</tr>
<% } }else{ %>
<tr>
<td>No record found</td>
</tr>
<% } %>
</tbody>
</table>
</div>
</body>
</html>
如果您想计算(SUM(您的选择框(下拉框(的值，您可以这样做。然而，我没有正确回答你的问题。*请确保您已包含jQuery。
<script>
$(document).ready(function(){
total_cost = 0;
$('#beverages option').each(function(){
total_cost = total_cost + parseInt($(this).val())
})
alert(total_cost)
})
</script>