Javascript 如何将json结果值传递给动态字段？

我制作了一个动态表单，但当我得到json结果时，它总是将结果传递给第一行，我想将所选结果传递给所选行我的动态行，如下所示 我制作了一个动态表单，但当我得到json结果时，它总是将结果传递给第一行，我想将所选结果传递给所选行我的动态行，如下所示 我制作了一个动态表单，但当我得到json结果时，它总是将结果传递给第一行，我想将所选结果传递给所选行我的动态行，如下所示

<div class='items-container'>
    <select id="items" class="items" style="width:127px; float:left;" name="items">
    <option value="1">Clothes</option>
    <option value="2">Office Stationery</option>
    <option value="3">Furniture</option>
    </select>
     <textarea id="description" class="description" style="float:left; display: block; height: 30px; width:209px; border-radius:0px; margin: -1px 1px 0;" name="description">  </textarea>
      <input id="unitprice" class="unitprice" type="text" style="float:left; display: block; height: 30px; width:106px; border-radius:0px; margin: -1px -1px 0;" name="unitprice">
      <input id="quantity" class="quantity" type="text" style="float:left; display: block; height: 30px; width:64px; border-radius:0px; margin: -1px 1px 0;" name="quantity">
      <select id="firsttax" style=" float:left; display: block; height: 31px; width:106px; border-radius:0px; margin: -2px -1px 0;" name="firsttax">
      <select id="secondtax" style="float:left; display: block; height: 31px; width:107px; border-radius:0px; margin: -2px 0px 0;" name="secondtax">
</div>

下面是我的ajax代码：

$(".items").on('change',function() {
var that = $(this);
var url = "http://localhost/QuickBacklog/web/app_dev.php/invoices/invoiceitem";
 $.ajax({
    type: "POST",
    url: url,
    data:{'invoiceitem' : that.find('option:selected').val()},
 }).done(function( result ) {
        var description=(result.description);
        var unitprice=(result.unitprice);
        var quantity=(result.quantity);
        document.getElementById("description").innerHTML = description;
        $("#unitprice").val(+unitprice);
        $("#quantity").val(+quantity); 
 });    
});

我的json结果正确，但当我传递结果时，它只将结果传递给#description、#unitprice、#quantity而不是#description2、#unitprice2、#quantity2

以下是我的html代码：

<select id="items" class="items" style="width:127px; float:left;" name="items">
<option value="1">Clothes</option>
<option value="2">Office Stationery</option>
<option value="3">Furniture</option>
</select>
 <textarea id="description" class="description" style="float:left; display: block; height: 30px; width:209px; border-radius:0px; margin: -1px 1px 0;" name="description">  </textarea>
  <input id="unitprice" class="unitprice" type="text" style="float:left; display: block; height: 30px; width:106px; border-radius:0px; margin: -1px -1px 0;" name="unitprice">
  <input id="quantity" class="quantity" type="text" style="float:left; display: block; height: 30px; width:64px; border-radius:0px; margin: -1px 1px 0;" name="quantity">
  <select id="firsttax" style=" float:left; display: block; height: 31px; width:106px; border-radius:0px; margin: -2px -1px 0;" name="firsttax">
  <select id="secondtax" style="float:left; display: block; height: 31px; width:107px; border-radius:0px; margin: -2px 0px 0;" name="secondtax">

衣裳
办公文具
家具

及

衣裳
办公文具
家具

使用类而不是ID

<input type="text" style="float:left; display: block; height: 30px; width:106px; border-radius:0px; margin: -1px -1px 0;" id="unitprice" class="unitprice" name="unitprice">

或

另一种方法是将属性选择器与

^

$("textarea[id^='description']").val(description);
$('input[id^="unitprice"]').val(unitprice);
$('input[id^="quantity"]').val(quantity);

---

用于动态生成的字段

$("body").on('change', '.items', function() {
    var that = $(this);
    var url = "http://localhost/QuickBacklog/web/app_dev.php/invoices/invoiceitem";
     $.ajax({
        type: "POST",
        url: url,
        data:{'invoiceitem' : that.find('option:selected').val()},
     }).done(function( result ) {
            var description=(result.description);
            var unitprice=(result.unitprice);
            var quantity=(result.quantity);
            document.getElementById("description").innerHTML = description;
            $("#unitprice").val(+unitprice);
            $("#quantity").val(+quantity); 
     });    
});

更新

将输入元素放入

div

容器中，如下所示

<div class='items-container'>
    <select id="items" class="items" style="width:127px; float:left;" name="items">
    <option value="1">Clothes</option>
    <option value="2">Office Stationery</option>
    <option value="3">Furniture</option>
    </select>
     <textarea id="description" class="description" style="float:left; display: block; height: 30px; width:209px; border-radius:0px; margin: -1px 1px 0;" name="description">  </textarea>
      <input id="unitprice" class="unitprice" type="text" style="float:left; display: block; height: 30px; width:106px; border-radius:0px; margin: -1px -1px 0;" name="unitprice">
      <input id="quantity" class="quantity" type="text" style="float:left; display: block; height: 30px; width:64px; border-radius:0px; margin: -1px 1px 0;" name="quantity">
      <select id="firsttax" style=" float:left; display: block; height: 31px; width:106px; border-radius:0px; margin: -2px -1px 0;" name="firsttax">
      <select id="secondtax" style="float:left; display: block; height: 31px; width:107px; border-radius:0px; margin: -2px 0px 0;" name="secondtax">
</div>

把这个脚本放在那里

that.parent().find('.description').val(description)
that.parent().find('.unitprice').val(unitprice)
that.parent().find('.quantity').val(quantity)

---

希望这将对您有所帮助。

尝试指定选择器

<div id="container1"><p id="unitprice"></p></div>
<div id="container2" style="display:none;"><p id="unitprice"></p></div>
<div id="container3" style="display:none;"><p id="unitprice"></p></div>

// ...
.done(function(result) {
    var container = $('div:visible');
    container.find('#unitprice').val(result.unitprice);
})

// ...
.完成（功能（结果）{
var容器=$（'div:visible'）；
container.find（'#unitprice'）.val（result.unitprice）；
})

此代码可以工作，但我也希望将json数据存储在动态字段中，如#description、#description2、#description3等等，我是如何做到的？它总是将数据存储在#description中，但我希望选择其selectbox id的值填充相关行Add

$（'.items'）。length

获取项目数，因此，您可以将此编号附加到说明等。。像$（“#unitprice”+$（'.items'）.length）来获取随机id。我添加$（'.items'）.length，但它总是将单价存储在最后一行的字段中。我想存储我选择项目所在行的值。它将更改所有字段的值，但我只想更改选定行的值

that.parent().find('.description').val(description)
that.parent().find('.unitprice').val(unitprice)
that.parent().find('.quantity').val(quantity)

<div id="container1"><p id="unitprice"></p></div>
<div id="container2" style="display:none;"><p id="unitprice"></p></div>
<div id="container3" style="display:none;"><p id="unitprice"></p></div>

// ...
.done(function(result) {
    var container = $('div:visible');
    container.find('#unitprice').val(result.unitprice);
})