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

Question

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

example

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

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

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);

这里是 link 的完整代码：jsbin

Answer 1

您可以使用 each 循环，因为每行可能有多个 select-框。然后，从每一行获取价格和数量，并在 JSON Object 中添加相同的保存。现在，为了向他们展示再次使用 .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>

Answer 2

我做了一些重构，因为您在多个元素上使用了相同的 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”对象，而不是创建一个新对象。

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

how to display a generated select option based on its row in a dynamic select box

html

javascript

jquery

html-select

drop-down-menu