Question

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

编辑1 添加了html

编辑2 将jQuery更改（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

编辑实际上，我认为它不起作用的原因是因为你声明了数量。像这样的东西会起作用：

$(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和函数闭包之外的初始计数声明;允许你跟踪它（我通过在数据属性上设置它来处理它，还有其他更好的方法）但这就是为什么你的on（'change'方法总是使用最高计数。

通过在函数内声明count，它特定于该闭包 - 因此，每次触发新的click事件时，您声明的所有函数都不会增加。

Answer 2

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

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'));
});
});});

Jquery自动完成文本字段，其中包含动态添加的行中的数据属性

2 个答案: