Question

我试图在用户选择哪种风味披萨以及他们想要多少之后计算总数。用户目前只能订购一种披萨。价格从7美元到10美元不等。由于我使用JS数组填充选择列表，因此我不知道如何为每个选项添加ID。我知道如果我可以为每个数组项添加一个id，我能够轻松计算总数但由于某种原因我无法解决这个问题。

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <div class="container">
    <form>
      <h2>Customer Information</h2>
      <div class="form-row">
        <div class="form-group col-md-6">
          <label for="name" class="col-form-label">Name</label>
          <input type="text" class="form-control" id="name" placeholder="First and Last Name">
        </div>
        <div class="form-group col-md-6">
          <label for="phone" class="col-form-label">Phone Number</label>
          <input type="text" class="form-control" id="phone" placeholder="123-456-7890">
        </div>
      </div>
      <h2>Delivery Address</h2>
      <div class="form-group">
        <label for="Address" class="col-form-label">Address</label>
        <input type="text" class="form-control" id="Address" placeholder="1234 Main St">
      </div>
      <div class="form-group">
        <label for="Address2" class="col-form-label">Address 2</label>
        <input type="text" class="form-control" id="Address2" placeholder="Apartment, studio, or floor">
      </div>
      <div class="form-row">
        <div class="form-group col-md-6">
          <label for="City" class="col-form-label">City</label>
          <input type="text" class="form-control" id="City" placeholder="Springfield">
        </div>
        <div class="form-group col-md-4">
          <label for="State" class="col-form-label">State</label>
          <input type="text" class="form-control" id="State" placeholder="MO">
        </div>
        <div class="form-group col-md-2">
          <label for="inputZip" class="col-form-label">Zip</label>
          <input type="text" class="form-control" id="inputZip" placeholder="65806">
        </div>
      </div>
      <h2>Order Details</h2>
      <div class="form-row">
        <div class="form-group col-md-6">
          <label for="pizzaChoice" class="col-form-label">Choose a Pizza Type</label>
          <select id="pizzaChoice"></select>
        </div>
        <div class="form-group col-md-6">
          <label for="orderAmount" class="col-form-label">How Hungry Are You?</label>
          <select id="orderAmount"></select>
        </div>
      </div>
      <button id="submit" type="submit" class="btn btn-primary">Place Order</button>
    </form>
  </div>
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
    <script>
      var order = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10'];
      select = document.getElementById('orderAmount');
      for(quant in order) {
        select.add(new Option(order[quant]));
      };
      var pizzaTypes = ['Cheese', 'Pepperoni', 'Veggie', 'Hawaiian', 'Supreme'],
      select = document.getElementById('pizzaChoice');
      for(pizzas in pizzaTypes) {
        select.add(new Option(pizzaTypes[pizzas]));
      };
    </script>
  </body>
</html>

根据Array中的选定项计算总计

0 个答案: