1

I have a problem with selected option value for different row. I succeed to get value for first row. What i want to do is different row item have different price.

My previous question about "JQuery Get Selected Option Value for Add Row" has been solved : Here

Now, i come out with another issues which is to get different value for different row. The picture sample is like below

My problem sample screenshot

Here's the code for my JS :

var i=$('table tr').length;
$(".tambah_sofa").on('click',function(){
    /* add new row function start here */
    html = '<tr id="row_'+i+'">';
    html += '<td><button type="button" id="delete-button" data-row-delete="row_'+i+'">X</button></td>';
    html += '<td><select id="sofa_'+i+'"><option value="10">hai</option><option value="20">20</option> <option value="50">50</option></select></td>';
    html += '<td>X</td>';
    html += '<td><input type="number" name="quantity[]" id="quantity_'+i+'" value="1" disabled="disabled"></td>';
    html += '</tr>';
    sidebar = '<tr id="row_'+i+'">';
    sidebar += '<td><input style="width:50%;" name="sofa'+i+'" type="text" id="price_sofa'+i+'" value="" disabled="disabled"></td>';
    sidebar += '</tr>';
    $('#table_item').append(html);
    $('#table_sidebar').append(sidebar);

    /* Get selected option value start here */
    $('body').on('change', '#sofa_'+i+'', function () {
    $('#price_sofa'+i+'').val($(this).find('option:selected').val()); 
    });
    /* Get selected option value end here */
    i++;
});
Community
  • 1
  • 1
Aizuddin Badry
  • 454
  • 3
  • 9
  • 22

1 Answers1

1
var i = $('table tr').length;
$(".tambah_sofa").on('click', function() {
  /* add new row function start here */
  html = '<tr id="row_' + i + '">';
  html += '<td><button type="button" id="delete-button" data-row-delete="row_' + i + '">X</button></td>';
  html += '<td><select id="sofa_' + i + '"><option value="10">hai</option><option value="20">20</option> <option value="50">50</option></select></td>';
  html += '<td>X</td>';
  html += '<td><input type="number" name="quantity[]" id="quantity_' + i + '" value="1" disabled="disabled"></td>';
  html += '</tr>';
  sidebar = '<tr id="row_' + i + '">';
  sidebar += '<td><input style="width:50%;" name="sofa' + i + '" type="text" id="price_sofa' + i + '" value="" disabled="disabled"></td>';
  sidebar += '</tr>';
  $('#table_item').append(html);
  $('#table_sidebar').append(sidebar);

  /* Get selected option value start here */
    (function(index){
      $('#sofa_' + index).on('change', function () {
        $('#price_sofa' + index).val($(this).val()); 
      });
    })(i);
  /* Get selected option value end here */
  i++;
});
Diode
  • 24,570
  • 8
  • 40
  • 51