时间戳

首页 > 解决方案 > 使用多个下拉列表更新总成本

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

问题描述

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

我无法通过不同的选择来更新价格。例如，如果有人要在其他类型的门票上选择“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>

标签： javascripthtml

解决方案

像这样的东西？

请注意，我将 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>

推荐阅读