使用多个下拉列表更新总成本

Question

我想根据所选的门票数量进行总更新

我无法获得使用不同选择更新的价格。例如，如果有人选择"2"个座位，然后在其他类型的门票上选择"3"个座位，我希望价格全部更新

var seat_prices = new Array();
seat_prices["None"] = 0;
seat_prices["seats-STA"] = 19.80;
seat_prices["seats-STP"] = 17.50;
seat_prices["seats-STC"] = 15.30;
seat_prices["seats-FCA"] = 30.00;
seat_prices["seats-FCP"] = 27.00;
seat_prices["seats-FCC"] = 24.00;
//Calculation
function calculateTotal(value, seat_prices) {
return value * seat_prices;
}
function getSeatPrice() {
var seatPrice = 0;
var form = document.forms["seatform"];
var seatSTA = form.elements["seats-STA"];
var seatSTP = form.elements["seats-STP"];
var seatSTC = form.elements["seats-STC"];
var seatFCA = form.elements["seats-FCA"];
var seatFCP = form.elements["seats-FCP"];
var seatFCC = form.elements["seats-FCC"];
seatPrice = seat_prices[seatSTA.value, seatSTP.value, seatSTC.value, seatFCA.value, seatFCP.value, seatFCC.value];
return seatPrice;
}
function getTotal() {
var total = seatSTA + seatSTP + seatSTC + seatFCA + seatFCP + seatFCC;
document.getElementById('total').innerHTML = "Total Price for Tickets $" + total;
}

<div class="Standard">
<label for="Standard Adult"><b>Standard Adult</b></label>
<select type="select" name="seats[STA]" id='seats-STA' onchange="calculateTotal(this.value)" required>
<option value="ticketNumber" disabled selected>Select number of tickets...</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>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
<label for="Standard Concession"><b>Standard Concession</b></label>
<select type="select" name="seats[STP]" id='seats-STP' onchange="calculateTotal(this.value)" required>
<option value="ticketNumber" disabled selected>Select number of tickets...</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>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
<label for="Standard Child"><b>Standard Child</b></label>
<select type="select" name="seats[STC]" id='seats-STC' onchange="calculateTotal(this.value)" required>
<option value="ticketNumber" disabled selected>Select number of tickets...</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>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
</div>
<!-- First Class Section -->
<div class="FirstClass">
<label for="First Class Adult"><b>First Class Adult</b></label>
<select type="select" name="seats[FCA]" id='seats-FCA' onchange="calculateTotal(this.value)" required>
<option value="ticketNumber" disabled selected>Select number of tickets...</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>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
<label for="First Class Concession"><b>First Class Concession</b></label>
<select type="select" name="seats[FCP]" id='seats-FCP' onchange="calculateTotal(this.value)" required>
<option value="ticketNumber" disabled selected>Select number of tickets...</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>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
<label for="First Class Child"><b>First Class Child</b></label>
<select type="select" name="seats[FCC]" id='seats-FCC' onchange="calculateTotal(this.value)" required>
<option value="ticketNumber" disabled selected>Select number of tickets...</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>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
</div>
<!-- Customer Details -->
<div class="CustomerDetails">
<label for="Name"><b>Name</b></label>
<input type="text" name="cust[name]" id='cust-name' required>
<label for="Email"><b>Email</b></label>
<input type="email" name="cust[email]" id='cust-email' required>
<label for="Mobile"><b>Mobile</b></label>
<input type="tel" name="cust[mobile]" id='cust-mobile' required>
<label for="Credit Card"><b>Credit Card</b></label>
<input type="text" name="cust[card]" id='cust-card' required>
<label for="Expiry"><b>Expiry</b></label>
<input type="month" name="cust[expiry]" id='cust-expiry' required>
</div>
<hr>
<label><b>Total Amount</b></label>
<input name="total" id="total" type="text" readonly>
<br><br>
<button type="submit" class="bookbtn" name="order" id='bookbtn' onclick="calculateTotal()">Book Now!</button>
</div>

Answer 1

像这样的东西？

请注意，我将div 包装在一个div id="container" 中 - 你甚至有一个尾随</div>所以我假设你已经有一个。将下面的 id 更改为您拥有的任何内容，或将 id="container" 添加到您的

PS：不允许用户重置座位不是一个好主意，所以我会亲自从第一个选项中删除残疾人

// we are better off with an object
var seat_prices = {
"STA": 19.80,
"STP": 17.50,
"STC": 15.30,
"FCA": 30.00,
"FCP": 27.00,
"FCC": 24.00
};
window.addEventListener("load", function() { // when page has loaded
document.getElementById("container").addEventListener("change", function(e) {
// the above listener catches ALL changes in the div
var tgt = e.target; // whatever was changed
if (tgt.tagName === "SELECT") {
var total = 0;
Object.keys(seat_prices).forEach(function(key) { // get the keys from the object
var val = document.getElementById("seats-" + key).value;
total += val === "ticketNumber" ? 0 : val * seat_prices[key]; // get the amount
})
document.getElementById("total").value = total.toFixed(2); // show it with two decimals
}
})
})

<div id="container">
<div class="Standard">
<label for="Standard Adult"><b>Standard Adult</b></label>
<select type="select" name="seats[STA]" id='seats-STA' required>
<option value="ticketNumber" disabled selected>Select number of tickets...</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>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
<label for="Standard Concession"><b>Standard Concession</b></label>
<select type="select" name="seats[STP]" id='seats-STP' required>
<option value="ticketNumber" disabled selected>Select number of tickets...</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>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
<label for="Standard Child"><b>Standard Child</b></label>
<select type="select" name="seats[STC]" id='seats-STC' required>
<option value="ticketNumber" disabled selected>Select number of tickets...</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>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
</div>
<!-- First Class Section -->
<div class="FirstClass">
<label for="First Class Adult"><b>First Class Adult</b></label>
<select type="select" name="seats[FCA]" id='seats-FCA' required>
<option value="ticketNumber" disabled selected>Select number of tickets...</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>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
<label for="First Class Concession"><b>First Class Concession</b></label>
<select type="select" name="seats[FCP]" id='seats-FCP' required>
<option value="ticketNumber" disabled selected>Select number of tickets...</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>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
<label for="First Class Child"><b>First Class Child</b></label>
<select type="select" name="seats[FCC]" id='seats-FCC' required>
<option value="ticketNumber" disabled selected>Select number of tickets...</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>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
</div>
<!-- Customer Details -->
<div class="CustomerDetails">
<label for="Name"><b>Name</b></label>
<input type="text" name="cust[name]" id='cust-name' required>
<label for="Email"><b>Email</b></label>
<input type="email" name="cust[email]" id='cust-email' required>
<label for="Mobile"><b>Mobile</b></label>
<input type="tel" name="cust[mobile]" id='cust-mobile' required>
<label for="Credit Card"><b>Credit Card</b></label>
<input type="text" name="cust[card]" id='cust-card' required>
<label for="Expiry"><b>Expiry</b></label>
<input type="month" name="cust[expiry]" id='cust-expiry' required>
</div>
<hr>
<label><b>Total Amount</b></label>
<input name="total" id="total" type="text" readonly>
<br><br>
<button type="submit" class="bookbtn" name="order" id='bookbtn' onclick="calculateTotal()">Book Now!</button>
</div>