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

Question

I have some problem with displaying a select option after i add a new one in dynamic select box. So the one i have here display the result of first row select box. While i change the qty and click order it will change the price result but after changing the option it will display result under the first one. For the result i need to change this code so when i click order button the result will display like this: if i have 3 rows of select boxes, the result will display each of it into 3 rows. Any help would be appreciated!

example

This is the example when i click order the first select box row, it display name=price*qty (this is the result i need for each select box)

This is the example when i change the first select box row option, it display a new result under the first result instead changing it

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, '
').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);

Here is the link for full code: jsbin

user_10606400 · Answer

You can use each loop because you might be having mutliple select-boxes for each row . Then , get price & quantity from each row and add save same inside JSON Object . Now, to show them use .each loop again and append new rows inside some divs.

I have created JSON structure like this :

{
  //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
}

Demo Code :

$(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("" + data.itemname + '' + data.total + "");
    })
  });

});

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

user_10900206 · Answer

I've done a bit of refactoring, because you were using same ids on multiple elements, so I changed them to classes. Full code: 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, '
').replace(/\{|\}|"/g, "")
            $('.result').html(result);
        });

    });

Your order function had two errors:

You were processing only the first menu row.
You you were using the same "selectMenu" object instead of creating a new one.

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

2 Answers