如何根據 javascript 的數量計算 select 選件的價格
[英]how to count the price of select option based on its quantity with 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>
3 個解決方案
解決方案1
1 已采納 2021-02-12 12:28:04
如果我理解正確
首先，您必須了解要購買的產品數量
然后只需簡單地相乘，你就會得到總數
$("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); });
解決方案2
1 2021-02-12 12:29:08
好的，我已經修改了您的程序以添加和重新計算項目數。 我有一個測試來避免負數......但你應該避免 id num 的輸入為負數。
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( Number($("#num").val())<=0)return; if (selectMenu.hasOwnProperty(itemName)) { selectMenu[itemName] = price * Number($("#num").val()); } else { selectMenu[itemName] = price * Number($("#num").val()); selectMenu["Nbr"] = Number($("#num").val()); } 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>
解決方案3
1 2021-02-12 12:30:16
讀出您指定金額的輸入字段
var amount = Number($("#num").val());
然后乘以你的價格
selectMenu[itemName] = (price*amount);
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 amount = Number($("#num").val()); var price = Number($("#type_select option:selected").data('price')); if (selectMenu.hasOwnProperty(itemName)) { selectMenu[itemName] += (price*amount); } else { selectMenu[itemName] = (price*amount); } 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>
Angular 4 - 如何根據數量和選項的變化計算價格
[英]Angular 4 - How to calculate price based on change in quantity and option
如何使用香草 JavaScript 根據數量更新動態價格？
[英]How to update dynamic price based on quantity using vanilla JavaScript?
如何禁用
<option>在一個<select>基於它在 JavaScript 中的值？我有一個帶有多個 <option> 的 <select> 。每一個都有獨特的價值。我需要禁用具有給定定義值（而不是 innerHTML ）的 <option> 。有人知道怎么做嗎？</select></option>
[英]How can I disable an <option> in a <select> based on its value in JavaScript?
我如何正確分配價格，然后按數量計算價格？ javascript
[英]how do i properly assign a price, then calculate price by quantity? javascript
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.
相關問題
Javascript Count 價格和數量
Angular 4 - 如何根據數量和選項的變化計算價格
如何使用香草 JavaScript 根據數量更新動態價格？
如何禁用
<option>在一個<select>基於它在 JavaScript 中的值？我有一個帶有多個 <option> 的 <select> 。每一個都有獨特的價值。我需要禁用具有給定定義值（而不是 innerHTML ）的 <option> 。有人知道怎么做嗎？</select></option>
Javascript：根據其內容選擇選項
如何在javascript中計算含稅價格和數量
根據選擇菜單中顯示的數量顯示正確的價格
Javascript計算數量*價格
我如何正確分配價格，然后按數量計算價格？ javascript
如何選擇基於其值添加到客戶端的選擇選項
相關標簽