我如何合并来自 JS 的 select 选项构建的项目的价格

Question

所以在这段代码中，我试图创建一个订单按钮功能来显示来自 <select> 的文本，结果将是项目名称和价格标签。但是我需要在这里更改代码，这样如果项目名称相同，结果不会显示超过一个的文本，当我在同一项目中单击订单时，它会将价格乘以我单击的次数（例如：单击订单来自 select 选项的同一商品的按钮两次，该商品的价格乘以 2)。抱歉，如果我问得太多，我的大脑无法理解如何构建代码。这是代码：

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() {
    selectMenu.push($("#type_select option:selected").attr('label') + " : " + $("#type_select option:selected").data('price'));
    $(".result").html(selectMenu.join('<br>'));
  });
});

button {
  width: 50%;
  margin-left: 25%;
  margin-right: 25%;
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <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>
    <title>JS Bin</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-6">
            <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-6">
            <select
              class="form-select form-select-lg mb-3"
              id="type_select"
            ></select>
          </div>
        </div>
      </div>
    </div>
    <br />
    <button type="submit" class="btn btn-secondary">Order</button>
    <br />
    <br />
    <div class="result text-center"></div>
  </body>
</html>

Answer 1

我想到了一个简单的解决方案：创建一个关联数组，将您的项目的每个 ID 映射到它的数量。当文档准备好时将数量初始化为0，之后在每次点击事件后，您可以更新数量并计算新的价格。

Answer 2

使用对象而非数组的快速解决方案：

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 article =$("#type_select option:selected").attr('label');
            var price = Number($("#type_select option:selected").data('price'));
            if(selectMenu.hasOwnProperty(article)) {
            selectMenu[article] += price;
          }else { 
            selectMenu[article] = 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">
  <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>
  <title>JS Bin</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-6">
                    <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-6">
                    <select class="form-select form-select-lg mb-3" id="type_select"></select>
                </div>
            </div>
        </div>
    </div>
    <br>
    <button type="submit" class="btn btn-secondary">Order</button>
    <br>
    <br>
    <div class="result text-center"></div>
</body>
</html>

我如何合并来自 JS 的 select 选项构建的项目的价格

How do i combine the price of an item from select option build from JS

html

javascript

jquery

html-select