javascript - 如果选项类型相同，如何对选择选项进行排序并将其组合
问题描述
我需要一些关于代码的帮助，所以每当我选择相同的选项并单击提交订单按钮时，它将显示我根据选择框的行选择的选项的数量>名称>价格。
我想更改结果，因此当我单击相同的选项类型时，它应该组合选项并将数量汇总在表格的同一行中。这是图片，以防有人对我的问题感到困惑
如您所见，我在这里选择了两次不同数量的“煎饼”，结果是表格的第一行和第二行分别显示。对于输出，它应该是这样的“组合数量（2 + 3 = 5），煎饼，组合数量的价格总和（17000 + 25500 = 42500）”。
我曾尝试搜索类似这样的问题，但该方法仅在它在 json 对象中具有相同名称时才有效。
这是完整的代码：
var data = {Food:[{id:1,name:"Fried Rice",price:1e4},{id:2,name:"Fried Noodle",price:9e3},{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(e) {
var $row = e ? $(e).closest(".menu-position") : $('.menu-position')
var selectedCategory = $row.find('.category-select').val()
var $typeSelect = $row.find('.type-select')
var dataOptions = data[selectedCategory]
$typeSelect.html('')
dataOptions.forEach(function (option) {
var optionEle = document.createElement('option')
optionEle.value = option.id
optionEle.label = option.name
optionEle.setAttribute('data-price', option.price)
$typeSelect.append(optionEle)
})
}
handleChange()
$(".addRow").click(function () {
var $typeSelect = $(".type-select").clone()
var html = '<div class="row outer menu-position">';
html += '<div class="col-md-3">';
html += '<button type="button" class="btn btn-danger btn-lg delRow">Del</button>';
html += '</div>';
html += '<div class="col-md-3">';
html += '<select class="form-select form-select-lg mb-3 category-select cat" onChange="handleChange(this)">';
html += '<option value="Food">Food</option>';
html += '<option value="Drink">Drink</option>';
html += '</select>';
html += '</div>';
html += '<br>';
html += '<div class="col-md-3">';
html += '<select class="form-select form-select-lg mb-3 type-select type">' + $typeSelect.html() + '</select>';
html += '</div>';
html += '<div class="col-md-3">';
html += '<input type="number" class="form-control form-control-lg mb-3 qty" placeholder="Qty" min="0">';
html += '</div>';
html += '</div>';
$('.container-fluid').append(html);
});
$(document).on('click', '.delRow', function () {
$(this).closest('.row').remove();
$('.order').trigger('click')
});
$(document).ready(function () {
$('.order').click(function () {
var selectMenu = {};
$("select.type").each(function (i) {
selectMenu[i] = {}
var text = $(this).find("option:selected").attr('label');
var price = Number($(this).find("option:selected").data('price'));
var qty = Number($(this).closest(".row").find(".qty").val())
selectMenu[i] = {
"total": price * qty,
"itemname": text,
"qty": qty
}
})
$('.result tbody').html("");
var total = 0
$.each(selectMenu, function (index, data) {
$('.result tbody').append("<tr class='orders'><td>" + data.qty + '</td><td>' + data.itemname + '</td><td>' + data.total + "</td></tr>");
total += parseInt(data.total);
})
$(".totalPrice input").val(total)
});
});button[type=submit] {
width: 50%;
margin-left: 25%;
margin-right: 25%;
}
button[type=button] {
font-size: 20px;
width: 50%;
margin-left: 25%;
margin-right: 25%;
}<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>
<div class="container">
<div class="container-fluid text-center">
<h2 style="font-size:70px; font-family:Lucida Console;">MENU</h2>
<br>
<div class="row menu-position">
<div class="col-md-3">
<button type="button" class="btn btn-primary btn-lg addRow">Add</button>
</div>
<div class="col-md-3">
<select class="form-select form-select-lg mb-3 category-select cat" onChange='handleChange(this)'>
<option value="Food">Food</option>
<option value="Drink">Drink</option>
</select>
</div>
<br>
<div class="col-md-3">
<select class="form-select form-select-lg mb-3 type-select type"></select>
</div>
<div class="col-md-3">
<input type="number" class="form-control form-control-lg mb-3 qty" placeholder="Qty" min="0">
</div>
</div>
</div>
</div>
<br>
<button type="submit" class="btn btn-secondary order">Order</button>
<br>
<br>
<div class="result text-center">
<table class="table table-bordered">
<thead>
<tr>
<th style="width:30%">Qty</th>
<th style="width:30%">Item name</th>
<th style="width:30%">Price</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
<br>
<div class="totalPrice text-center">
<h4>Total Price</h4>
<input type="number" class="text-center" disabled>
</div>很抱歉问了很多，希望有人能就我遇到的问题分享一些提示。
解决方案
我已经修改了您的订单点击代码。我使用这样的 selectMenu 对象
selectMenu={item:[qty,price,qty*price}，因此更容易对相同的项目进行分组。（我避免显示 qty = 0 的项目）。
var data = {Food:[{id:1,name:"Fried Rice",price:1e4},{id:2,name:"Fried Noodle",price:9e3},{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(e) {
var $row = e ? $(e).closest(".menu-position") : $('.menu-position')
var selectedCategory = $row.find('.category-select').val()
var $typeSelect = $row.find('.type-select')
var dataOptions = data[selectedCategory]
$typeSelect.html('')
dataOptions.forEach(function (option) {
var optionEle = document.createElement('option')
optionEle.value = option.id
optionEle.label = option.name
optionEle.setAttribute('data-price', option.price)
$typeSelect.append(optionEle)
})
}
handleChange()
$(".addRow").click(function () {
var $typeSelect = $(".type-select").clone()
var html = '<div class="row outer menu-position">';
html += '<div class="col-md-3">';
html += '<button type="button" class="btn btn-danger btn-lg delRow">Del</button>';
html += '</div>';
html += '<div class="col-md-3">';
html += '<select class="form-select form-select-lg mb-3 category-select cat" onChange="handleChange(this)">';
html += '<option value="Food">Food</option>';
html += '<option value="Drink">Drink</option>';
html += '</select>';
html += '</div>';
html += '<br>';
html += '<div class="col-md-3">';
html += '<select class="form-select form-select-lg mb-3 type-select type">' + $typeSelect.html() + '</select>';
html += '</div>';
html += '<div class="col-md-3">';
html += '<input type="number" class="form-control form-control-lg mb-3 qty" placeholder="Qty" min="0">';
html += '</div>';
html += '</div>';
$('.container-fluid').append(html);
});
$(document).on('click', '.delRow', function () {
$(this).closest('.row').remove();
$('.order').trigger('click')
});
$(document).ready(function () {
$('.order').click(function () {
var selectMenu = {};
$("select.type").each(function (i) {
//selectMenu[i] = {}
var text = $(this).find("option:selected").attr('label');
var price = Number($(this).find("option:selected").data('price'));
var qty = Number($(this).closest(".row").find(".qty").val());
if(text in selectMenu){
selectMenu[text][0] += qty;
selectMenu[text][1] += price;
selectMenu[text][2] += qty*price;
}else{
if(qty > 0) selectMenu[text]=[qty,price,qty*price];
}
})
$('.result tbody').html("");
var total = 0
$.each(selectMenu, function (key,value) {
$('.result tbody').append("<tr class='orders'><td>" + value[0] + '</td><td>' + key + '</td><td>' + value[2] + "</td></tr>");
total += parseInt(value[2]);
});
$(".totalPrice input").val(total)
});
});button[type=submit] {
width: 50%;
margin-left: 25%;
margin-right: 25%;
}
button[type=button] {
font-size: 20px;
width: 50%;
margin-left: 25%;
margin-right: 25%;
}<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>
<div class="container">
<div class="container-fluid text-center">
<h2 style="font-size:70px; font-family:Lucida Console;">MENU</h2>
<br>
<div class="row menu-position">
<div class="col-md-3">
<button type="button" class="btn btn-primary btn-lg addRow">Add</button>
</div>
<div class="col-md-3">
<select class="form-select form-select-lg mb-3 category-select cat" onChange='handleChange(this)'>
<option value="Food">Food</option>
<option value="Drink">Drink</option>
</select>
</div>
<br>
<div class="col-md-3">
<select class="form-select form-select-lg mb-3 type-select type"></select>
</div>
<div class="col-md-3">
<input type="number" class="form-control form-control-lg mb-3 qty" placeholder="Qty" min="0">
</div>
</div>
</div>
</div>
<br>
<button type="submit" class="btn btn-secondary order">Order</button>
<br>
<br>
<div class="result text-center">
<table class="table table-bordered">
<thead>
<tr>
<th style="width:30%">Qty</th>
<th style="width:30%">Item name</th>
<th style="width:30%">Price</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
<br>
<div class="totalPrice text-center">
<h4>Total Price</h4>
<input type="number" class="text-center" disabled>
</div>推荐阅读
- python - 为什么我的解析器不能用我的语言打印字符串
- firebase - 从 Firebase 获取前 100 名分数并使用 Swift4 在 Xcode TableView 中显示它们
- jackson-databind - 杰克逊数据绑定的替代方案
- sql - 具有内部连接的别名
- oracle - 查看表的内容和约束
- mysql - 从 MySQL 到 MariaDB 的 mysql 查询问题
- c++ - 我可以为自己的可变参数函数启用有关错误使用说明符的警告吗？
- sql - 如何查看 SQlite 数据库的更改并触发 Shell 脚本
- xamarin.android - 我需要在每个 Activity 的 OnCreate 中启动 AppCenter 还是只在第一个？
- python - python flask env变量导入错误应用程序