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

Question

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

例子

这是我单击订购第一个选择框行时的示例，它显示名称=价格*数量（这是我需要每个选择框的结果）

这是我更改第一个选择框行选项时的示例，它在第一个结果下显示一个新结果，而不是更改它

代码

$(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);
        });

    });

您的订单函数有两个错误：

1. 您只处理了第一行菜单。
2. 您使用的是同一个“selectMenu”对象，而不是创建一个新对象。

Answer 2

您可以使用each 循环，因为每行可能有多个选择框。然后，从每一行获取价格和数量，并在 JSON 对象 中添加相同的保存。现在，为了向他们展示再次使用 .each 循环并在一些 div 中追加新行。

我已经创建了这样的 JSON 结构：

{
  //here 0 is first row  
  "0": {
      "total": 0, //this is total for first row
      "itemname": "Fried Rice" //this is price for first row
    } 
  //same for other rows as well only changing  1 ,2..etc
}

演示代码：

$(document).ready(function() {
  $('.order').click(function() {
    var selectMenu = {};
    //loop through type select
    $("select.type").each(function(i) {
      selectMenu[i] = {} //create array
      //get label value
      var text = $(this).find("option:selected").attr('label');
      //get price
      var price = Number($(this).find("option:selected").data('price'));
      //get qty
      var qty = Number($(this).closest(".row").find(".qty").val())
      //push same in array
      selectMenu[i] = {
        "total": price * qty,
        "itemname": text
      }
    })

    $('.result tbody').html(""); //clear tbody
    $.each(selectMenu, function(index, data) {
      //add tr inside tbody
      $('.result tbody').append("<tr class='orders'><td>" + data.itemname + '</td><td>' + data.total + "</td></tr>");
    })
  });

});

.orders {
  color: green;
  font-weight: bold;
}

<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">
      <div class="col-md-3">
        <button type="button" class="btn btn-primary btn-lg addRow">Add</button>
      </div>
      <div class="col-md-3">
        <!--added class cat -->
        <select class="form-select form-select-lg mb-3 cat" id="category_select" onChange='handleChange(this)'>
          <option value="Food">Food</option>
          <option value="Drink">Drink</option>
        </select>
      </div>
      <br>
      <div class="col-md-3">
        <!--added class type -->
        <select class="form-select form-select-lg mb-3 type" id="type_select">
          <option value="1" label="Fried Rice" data-price="10000"></option>
          <option value="2" label="Fried Noodle" data-price="9000"></option>
          <option value="3" label="Pancake" data-price="8500"></option>
          <option value="4" label="French Fries" data-price="7500"></option>
        </select>
      </div>
      <div class="col-md-3">
        <input type="number" class="form-control form-control-lg mb-3 qty" id="num" placeholder="Qty" min="0">
      </div>
    </div>
    <div class="row">
      <div class="col-md-3">
        <button type="button" class="btn btn-danger btn-lg ">Delete</button>
      </div>
      <div class="col-md-3">
        <select class="form-select form-select-lg mb-3 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">
          <option value="1" label="Fried Rice" data-price="10000"></option>
          <option value="2" label="Fried Noodle" data-price="9000"></option>
          <option value="3" label="Pancake" data-price="8500"></option>
          <option value="4" label="French Fries" data-price="7500"></option>
        </select>
      </div>
      <div class="col-md-3">
        <input type="number" class="form-control form-control-lg mb-3 qty" id="num" placeholder="Qty" min="0">
      </div>
    </div>
  </div>
</div>
<br>
<button type="button" class="btn btn-secondary order">Order</button>
<br>
<br>
<div class="result text-center">
  <table class="table table-bordered">
    <thead>
      <tr>
        <th>Item name </th>
        <th>Price</th>
      </tr>
    </thead>
    <tbody></tbody>
  </table>
</div>