如果选项类型相同，如何对选择选项进行排序和组合

如何解决如果选项类型相同，如何对选择选项进行排序和组合

我需要一些代码方面的帮助，所以每当我选择相同的选项并点击提交订单按钮时​​，它都会根据选择框的行显示我选择的选项的数量>名称>价格。

我想更改结果，因此当我单击相同的选项类型时，它应该组合该选项并将数量与表格中的同一行中的数量相加。这是图片，以防有人对我的问题感到困惑

如您所见，我在这里选择了两次不同数量的“煎饼”，结果是表格的第一行和第二行分别显示。对于输出，它应该是这样的“组合数量（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},name:"Orange Juice",price:5400},name:"mineral Water",price:3500},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},name:"Orange Juice",price:5400},name:"Mineral Water",price:3500},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,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>