jquery - 使用动态表获取更改下拉列表的值

Question

我有一个动态表，我点击添加新行没有问题。我有一个名为“服务”的列，其中包含一个下拉列表和一个名为“价格”的列。每次我做出选择时，价格都会根据服务下拉列表中的相应值发生变化。

我的问题是:例如，如果我选择一项服务(牙医)，他的价格将显示在价格栏中。添加新行并选择另一项服务(骨科医生)后，他的价格显示在价格列中，并且删除(牙医)的价格以获得(骨科医生)的价格。这是针对我添加的所有新行完成的。

如何在所有行中保留每项服务的价格？

var numRows = 1,
    ti = 2;

function addRow() {
  $('#addr' + numRows).html("<td><select class='service form-control' onChange='getPrice(this.value);'><option value='' hidden></option><?php foreach($serv as $s){?><option  value='<?=$s->id?>'><?=$s->insumservicio?></option><?php }?></select></td><td class='total-pag-seg'><input  name='totalpagseg" + numRows + "' type='text' class='price form-control' value='' tabindex='" + (ti++) + "' /></td>");

  $('#turf tr:last').after('<tr id="addr' + (numRows + 1) + '" class="calculation visible"></tr>');
  numRows++;
}

function getPrice(val) {
  var insurance = "<?=$insurance?>";
  $.ajax({
    type: "POST",
    url: '<?php echo site_url('
    admin / getPrice ');?>',
    data: {
      id: val,
      insurance: insurance
    },
    success: function(data) {
      $("#turf").find('tr').each(function() {
        $(this).find('input.price').val(data);
      });
    };

  });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="turf">
  <thead>
    <tr>
      <td><button id="add_row"> New row</button></td>
      <td>Service</td>
      <td>Price</td>
    </tr>
  </thead>
  <tbody>
    <tr id='addr1' class="calculation visible">
      <td></td>
      <td>
        <select class="service form-control" onChange="getPrice(this.value);">
<option value="" hidden></option>
<?php foreach($serv as $s){?>
<option  value="<?=$s->id?>"><?=$s->insumservicio?></option>
<?php
}
?>
</select>
      </td>
      <td>
        <input type="text" class="price" tabindex="1" />
      </td>
    </tr>
    <tr id='addr2' class="calculation visible">
  </tbody>
</table>

Answer 1

这个例子可以指导您:

onChange='getPrice(this);'

function getPrice(dropDown) {
  var insurance = "<?=$insurance?>";
  $.ajax({
    type: "POST",
    url: '<?php echo site_url('
    admin / getPrice ');?>',
    data: {
      id: dropDown.value,
      insurance: insurance
    },
    success: function(data) {
        $($(dropDown).parents('tr')[0]).find('input.price').val(data);
    };

  });
}