javascript - 如何根据动态选择框中的行显示生成的选择选项

Question

在动态选择框中添加新选项后，我在显示选择选项时遇到了一些问题。所以我在这里显示第一行选择框的结果。当我更改数量并单击订单时，它会更改价格结果，但更改选项后，它将在第一个下显示结果。对于结果，我需要更改此代码，因此当我单击订单按钮时​​，结果将显示如下:如果我有 3 行选择框，则结果会将其显示为 3 行。任何帮助，将不胜感激!

example

这是当我点击订购第一个选择框行时的示例，它显示名称=价格*数量(这是我需要为每个选择框的结果)
这是我更改第一个选择框行选项时的示例，它在第一个结果下显示一个新结果，而不是更改它

code

$(document).ready(function () {
        var selectMenu = {};
        $('.order').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, "")
            //the result in the first row change price based on qty, but when option is changed the result display under the first one

            $('.result').html(result);

这是完整代码的链接: jsbin

Answer 1

我进行了一些重构，因为您在多个元素上使用了相同的 id，所以我将它们更改为类。全码:jsbin

        $(document).ready(function () {
        var selectMenu = {};
        $('.order').click(function () {
             selectMenu = {};
            $('.menu-position').each(function (i) {
                var category = $(this).find('.category-select').val()
                var $selectedItem = $(this).find('.type-select :selected')
                var name = $selectedItem.attr('label')
                var price = $selectedItem.data('price')
                var qty = +$(this).find('.qty').val()
                var total = price * qty
                
                selectMenu[name] = total
            })
            
            var result = JSON.stringify(selectMenu).replace(/,/g, '<br>').replace(/\{|\}|"/g, "")
            $('.result').html(result);
        });

    });

您的订单功能有两个错误:

您只处理了第一行菜单。

您使用的是相同的“selectMenu”对象，而不是创建一个新对象。