如何在Javascript/Jquery中添加表格行时更改组合框选择上的文本框

我已经通过你的JS提琴链接。您需要通过使用最接近的jquery获取当前列引用来将值更改为特定行。

解决方案是，更改下面的代码并尝试:

$(function () {
  $(document).on('change', 'select.products', function(){
    var selected = $(this).val();
    //$(".price").val(selected);
    $(this).closest('tr').find(".price").val(selected);
  });
  $(document).on('click', '.addProduct', function(){
    var ele = $(this).parents('tr').clone();
    ele.find('input[type=text]').val('');
    $(this).parents('tr').after(ele);
  });
  $(document).on('click', '.delProduct', function(){
    if($(this).parents('table').find('tr').length > 2) {
      $(this).parents('tr').remove();
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="addProducts" border="1">
            <tr>
                <td>POI</td>
                <td>Quantity</td>
                <td>Price</td>
                <td>Product</td>
                <td>Add Rows?</td>
            </tr>
            <tr>
                <td>1</td>
                <td><input size=25 type="text" id="lngbox" readonly=true/></td> 
                <td><input size=25 type="text" class="price" readonly=true/></td>
                <td>
                    <select name="selRow0" class="products">
                        <option value="500">Product 1</option>
                        <option value="200">Product 2</option>
                         <option value="450">Product 3</option>
                    </select>   
                </td>   
                <td><input type="button" class="delProduct" value="Delete" /></td>
                <td><input type="button" class="addProduct" value="AddMore" /></td>
            </tr>
        </table>
        <div id="shw"></div>

更好的解决方案是为价格文本框生成具有不同id的整个tr，该文本框将匹配下拉选项id/name，然后根据该id进行更新。

如果您想要快速解决，请将更改事件替换为以下

   $(document).on('change', 'select.products', function(event){
        var selected = $(this).val();
        $(event.target.parentNode.parentNode).find(".price")[0].value = selected;
      });