如何使用 jquery 更改输入字段数组

Question

在一个用于注册房间和二手产品的 Web 应用程序中，我生成了一个包含多个输入字段的行列表（参见代码 #1）。该代码只是添加了带有一些输入字段的行。使用 PHP 生成的动态下拉列表也在代码中回显（另请参见代码 #1）。

行生成良好，下拉列表运行正常。但是，该代码用于将产品添加到订单中。这些产品在数据库中有一个默认价格（可以由不同的页面编辑......）。

生成的每一行看起来都像代码 #2，但是为了便于阅读而进行了调整。当我从列表中选择产品时，其他 2 个字段必须插入价格。仅用于更改此订单价格的输入字段和仅供参考的文本部分。

代码 #3 显示了创建调用并在所需位置返回值的代码部分。

这段代码在第一行的效果很好，但是当我更改任何其他下拉列表的第二行时，没有任何变化。

我的问题是，当我在生成的任何下拉列表中选择任何产品以将价格显示到相应的输入字段/div 中时，我该如何使其工作？

我没有一个线索来解决这个问题。请帮忙。

编辑 1：代码 #2 和 #3 更改为使用 'class' 而不是 'id'。作为一个坏人，我在多次使用相同的字段时确实使用了 id 而不是类......请原谅我的愚蠢错误。但这并不能解决即使我多次添加该行也只修改第一行的问题。

也许在不同的地方问我的问题会让我更容易理解我的问题，而代码保持不变。

我有几行带有 PHP 生成的选择框、一个空的输入框类型编号和一个空的 div，仅供参考。

虚拟模式示例：

<select class product></select><input type="number" name="price[]" class="price"><div class="ajaxprice">
<select class product></select><input type="number" name="price[]" class="price"><div class="ajaxprice">
<select class product></select><input type="number" name="price[]" class="price"><div class="ajaxprice">
<select class product></select><input type="number" name="price[]" class="price"><div class="ajaxprice">

这些行是使用代码 #1 添加的，而第一行已经在带有“添加”按钮而不是“删除”按钮的页面上。当我更改第一行中的选择时，代码#3 中的脚本很好地填充了输入和 div。如果更改其他行之一，则根本没有任何变化。也不是我出于测试目的插入的警报。那么如何将所需的信息输入到div中并在我更改第n个选择框时输入呢？

代码 #1： 使用输入字段插入和删除行

var max_rows = 10; // maximum input fields
var wrapper = $("#wrapper_rows");
var counter = 1;

$(".rowBtn").click(function (e) {
    e.preventDefault();
    if (counter < max_rows) {
        counter++;
        var row =   'some lay out';
        row = row + '<?php echo get_products_add($con, $com); ?>';
        row = row + 'some futher layout / closing tags';
        $(wrapper).append(row );
    }
})

$(wrapper).on("click",".rowminBtn", function(e){ 
    e.preventDefault(); 
    $(this).parent('div').parent('div').remove(); counter--;
})

代码 #2

    <select class="product" name="product[]" >// LOADS OF OPTIONS</select>
    <input type="number" class="price" name="price[]">
    <div class="ajaxprice"></div>

代码 #3

$(".product").change(function () {
    var productid = $('.product').val();
    if (productid != '') {
        $.ajax({  
            url:"get_price.php",  
            method:"POST",  
            data: { id:productid },
            dataType:"json",  
            success:function(result){  
                $(".ajaxprice").html("(Original price: " + result + ")");
                $(".price").val(result);
            }
        })
    }
    else { 
        $(".ajaxprice").html('');
        $(".price").val("");
    }
})

Answer 1

您在应该使用类的地方使用 ID。那是因为 ID 必须是唯一的。如果您多次使用它，您通常会遇到像您这样的问题。

将id 属性更改为class 属性后，您仍然需要更改选择输入元素的方式。这会导致您的 HTML 出现另一个问题。

如果您有逻辑上分隔的部分，例如输入字段的rows：

<select class="product"></select>
<input type="number" name="price[]" class="price">
<div class="ajaxprice"></div>

您应该在您的 HTML 中明确区分，这样会更容易阅读和理解，并让您能够选择正确的输入。

首先将行包装在 div、表格行、部分中，如下所示：

<div class="row">
    <select class="product"></select>
    <input type="number" name="price[]" class="price">
    <div class="ajaxprice"></div>
</div>

然后，当.product 类触发更改事件时，使用该行作为输入字段选择的基础：

$(".product").change(function () {
    // $('.product') does not select the 
    // changed product element,use $(this) to 
    // get the element that fired the event
    var productid = $('this').val(); 
    var $row = $(this).parent('.row'); // select the wrapper element
    if (productid != '') {
        $.ajax({  
            url:"get_price.php",  
            method:"POST",  
            data: { id:productid },
            dataType:"json",  
            success:function(result){  
                // now select the ajaxprice and price elements in the wrapper
                $row.find(".ajaxprice").html("(Original price: " + result + ")");
                $row.find(".price").val(result);
            }
        })
    }
    else { 
        // same here 
        $row.find(".ajaxprice").html('');
        $row.find(".price").val("");
    }
})

编辑：

这些行是使用代码 #1 添加的，而第一行已经在带有“添加”按钮而不是“删除”按钮的页面上

动态添加的元素不会附加事件处理程序 - 只有在第一次附加处理程序时存在于 DOM 中的 DOM 元素才具有它。

对此有两种可能的解决方案。添加行时添加事件处理程序。或者更改事件处理程序以附加到父级：

$('body').on('change', '.product', function() {
   // same code as before
});

现在该事件会在 body 的所有具有 .product 类的子元素上触发