0

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

这是我的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">

和

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

3 回答 3

0

尝试指定选择器。

<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);
})
于 2013-09-30T05:01:53.283 回答
0

使用类而不是 ids...

<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">

并在您的成功函数中使用类选择器

 $(".unitprice").val(+unitprice);

或者

另一种方法是使用属性选择器^

$("textarea[id^='description']").val(description);
$('input[id^="unitprice"]').val(unitprice);
$('input[id^="quantity"]').val(quantity);
于 2013-09-30T04:57:36.620 回答
0

对于动态生成的字段。

$("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>

而不是这些行

document.getElementById("description").innerHTML = description;
$("#unitprice").val(+unitprice);
$("#quantity").val(+quantity);

把这个脚本放在那里。

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

希望这会帮助你。

于 2013-09-30T04:57:37.487 回答