动态添加行中具有数据属性的 Jquery 自动完成文本字段

Question

以下 jQuery 可以很好地添加行，并从 php/mysql 文件填充选择列表。我遇到的问题是价格字段正在自动填充并在添加的每个新行上选择更改时更改...但是如果您返回并尝试更改已添加的行之一，它不起作用。例如，如果您添加 4 个空白行，然后尝试返回并选择产品，它只会填充最后一行的价格。或者，如果您在添加新行之前添加每一行并选择产品，然后返回并尝试更改产品，则之前选择的价格将保持不变。有任何想法吗？

编辑1添加了html

EDIT 2 将 jQuery change(function() 更改为 on()... 仍然可以正常工作。自动完成功能仅适用于添加的最后一行。

var count = 0;

$(document).ready(function(){

$('p#add_field').click(function(){

    count += 1;

    $('#addingContainer').append('<label>Product or Service</label><select id="product_' + count + '" name="products[]'+ '" ><option value=""></option>');

    $.getJSON('includes/productrow.php', function(data){
            var select = $('#product_' + count + '');
            $.each(data, function(key, val) {
                $('<option/>').attr('value', val.product_id)
                              .attr('data-price', val.price)
                              .html(val.product)
                              .appendTo(select);
    });

    $('#addingContainer').append('</select>&nbsp;&nbsp;<label>Price</label><input type="text" id="price_' + count + '" name="prices[]' + '" class="price" ><br>');
    });

    $('#addingContainer').on('change', 'select[id="product_' + count + '"]', function(){

        $('#price_' + count +'').val($('select[id="product_' + count + '"] option:selected').data('price'));

});});});

HTML：

<div id="addingContainer" class="pure-control-group">
         <p id="add_field"><a href="#"><span>Add Products</span></a></p>
         </div>

Answer 1

edit 实际上，我认为它不起作用的原因是您声明计数的位置。像这样的东西会起作用：

$(document).ready(function(){

$('p#add_field').click(function(){
    var count = $('#addingContainer').data("count") || 0;
    count += 1;

    $('#addingContainer').data("count", count).append('<label>Product or Service</label><select id="product_' + count + '" name="products[]'+ '" ><option value=""></option>');

    $.getJSON('includes/productrow.php', function(data){
            var select = $('#product_' + count + '');
            $.each(data, function(key, val) {
                $('<option/>').attr('value', val.product_id)
                              .attr('data-price', val.price)
                              .html(val.product)
                              .appendTo(select);
    });

    $('#addingContainer').append('</select>&nbsp;&nbsp;<label>Price</label><input type="text" id="price_' + count + '" name="prices[]' + '" class="price" ><br>');
    });

    $('#addingContainer').on('change', 'select[id="product_' + count + '"]', function(){

        $('#price_' + count +'').val($('select[id="product_' + count + '"] option:selected').data('price'));

});});});

请注意，我在 document.ready 和函数闭包之外删除了您对 count 的初始声明；这使您可以跟踪它（我通过在数据属性上设置它来处理它，还有其他更好的方法）但这就是为什么您的 on('change' 方法始终使用最高计数的原因。

通过在函数内部声明计数，它是特定于该闭包的——因此不会在每次触发新的单击事件时为您声明的所有函数增加计数。

Answer 2

试试这个。我在选择框中添加了一个类“pselect”，使其更易于使用。然后我修改了change函数。

var count = 0;

$(document).ready(function(){

$('p#add_field').click(function(){

count += 1;

$('#addingContainer').append('<label>Product or Service</label><select id="product_' + count + '"    name="products[]'+ '" class="pselect"><option value=""></option>');

$.getJSON('includes/productrow.php', function(data){
        var select = $('#product_' + count + '');
        $.each(data, function(key, val) {
            $('<option/>').attr('value', val.product_id)
                          .attr('data-price', val.price)
                          .html(val.product)
                          .appendTo(select);
});

$('#addingContainer').append('</select>&nbsp;&nbsp;<label>Price</label><input type="text" id="price_' + count + '" name="prices[]' + '" class="price" ><br>');
});

$('#addingContainer').on("change",".pselect",function(){
$(this).next(".price").val($("option:selected", this).attr('data-price'));
});
});});