时间戳

首页 > 解决方案 > 如何使用javascript根据其数量计算选择选项的价格

javascript - 如何使用javascript根据其数量计算选择选项的价格

问题描述

我在这里创建了一个数量输入，但我找不到如何计算价格数据以匹配我选择的数量的方法。对于结果，它应该像这里的第一个，但不是按多少点击按钮计算价格，而是计算我要订购的数量。关于我可以使用什么方法的任何提示？

这是代码：

var data = {
            Food: [
                {
                    id: 1,
                    name: 'Fried Rice',
                    price: 10000
                },
                {
                    id: 2,
                    name: 'Fried Noodle',
                    price: 9000
                },
                {
                    id: 3,
                    name: 'Pancake',
                    price: 8500
                },
                {
                    id: 4,
                    name: 'French Fries',
                    price: 7500
                }
            ],
            Drink: [
                {
                    id: 1,
                    name: 'Cola',
                    price: 4600
                },
                {
                    id: 2,
                    name: 'Orange Juice',
                    price: 5400
                },
                {
                    id: 3,
                    name: 'Mineral Water',
                    price: 3500
                },
                {
                    id: 4,
                    name: 'Coffee',
                    price: 5800
                }
            ]
        }

        function handleChange() {
            var x = document.getElementById("category_select").value;

            var dataOptions = data[x]
            var dataSelect = document.getElementById('type_select')
            dataSelect.innerHTML = ''

            dataOptions.forEach(function (option) {
                var optionEle = document.createElement('option')
                optionEle.value = option.id
                optionEle.label = option.name
                optionEle.setAttribute('data-price', option.price)

                dataSelect.appendChild(optionEle)
            })

        }
        handleChange()

        $(document).ready(function () {
            var selectMenu = {};
            $("button").click(function () {
                var itemName = $("#type_select option:selected").attr('label');
                var price = Number($("#type_select option:selected").data('price'));
                if (selectMenu.hasOwnProperty(itemName)) {
                    selectMenu[itemName] += price;
                } else {
                    selectMenu[itemName] = price;
                }
                var result =JSON.stringify(selectMenu).replace(/,/g,'<br>').replace(/\{|\}|"/g,"")

                $(".result").html(result);
            });
        });
button {
            width: 50%;
            margin-left: 25%;
            margin-right: 25%;
        }
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
    <link type="text/css" rel="stylesheet"
        href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />

    <style>
        button {
            width: 50%;
            margin-left: 25%;
            margin-right: 25%;
        }
    </style>
    <title>Menu</title>
</head>

<body>
    <div class="container">
        <div class="container-fluid text-center">
            <h2 style="font-size:70px; font-family:Lucida Console;">MENU</h2>
            <br>
            <div class="row">
                <div class="col-md-4">
                    <select class="form-select form-select-lg mb-3" id="category_select" onChange='handleChange()'>
                        <option value="Food">Food</option>
                        <option value="Drink">Drink</option>
                    </select>
                </div>
                <br>
                <div class="col-md-4">
                    <select class="form-select form-select-lg mb-3" id="type_select"></select>
                </div>
                <div class="col-md-4">
                    <input type="number" class="form-control form-control-lg mb-3" id="num">
                </div>
            </div>
        </div>
    </div>
    <br>
    <button type="submit" class="btn btn-secondary">Order</button>
    <br>
    <br>
    <div class="result text-center"></div>

标签： javascripthtmljqueryhtml-select

解决方案

如果我理解正确

首先，您必须了解要购买的产品数量

然后只需简单地相乘，你就会得到总数

$("button").click(function() {
  var itemName = $("#type_select option:selected").attr('label');
  var price = Number($("#type_select option:selected").data('price'));
  var count = Number($("#num").val());
  var total = price * count;
  selectMenu[itemName] = total
  var result = JSON.stringify(selectMenu).replace(/,/g, '<br>').replace(/\{|\}|"/g, "")

  $(".result").html(result);
});

推荐阅读