0

我有一个 json 数组

var data = [ { "id": "1", "label": 1, "value": "11.00" }, 
                 { "id": "2", "label": 2, "value": "21.00" }, 
                 { "id": "3", "label": 3, "value": "31.00" }, 
                 { "id": "4", "label": 4, "value": "40.00" }, 
                 { "id": "5", "label": 5, "value": "50.00" }, 
                 { "id": "6", "label": 6, "value": "60.00" }, 
                 { "id": "9", "label": 9, "value": "90.00" }, 
                 { "id": "8", "label": 8, "value": "80.00" }, 
                 { "id": "7", "label": 7, "value": "70.00" } 
               ];

和一个从

<form action="" method="POST">
Quantity1: <input type="text" name="quantity1" id="quantity1">
Product1: <select name="product1" id="product1"><option value="1">Product 1</option><option value="2">Product 2</option></select>
Price1: <input type="text" name="price1" id="price">
Quantity2: <input type="text" name="quantity2" id="quantity2">
Product2: <select name="product1" id="product2"><option value="1">Product 1</option><option value="2">Product 2</option></select>
Price2: <input type="text" name="price2" id="price">
.
.
.
<input type="submit" value="submit">
</form>

我想自动填充产品的价格。很抱歉我不太了解 jquery 和 javascript。试过这个但没有奏效

$( "#product1" ).change(function(){
            source: data,
            minLength: 1,
            select: function( event, ui ) {
                 $('#price1').val( ui.item.value );
            }
        });

请帮助我如何填充产品 1 的价格 1 和产品 2 的价格 2。

这是适用于#product1 的代码

$('#product1').change(function() {  
            $('input[name="unit_price1"]').val(data[$(this).val()-1].value)
        });

但是一旦我尝试循环它就不能我的循环有问题。

$(function() {
        var data = <?php echo $projects; ?>;
var nbProducts = data.length;
    for(var iProduct = 0; iProduct < nbProducts; iProduct++) {
        $('#product'+iProduct).change(function() {  
            $('input[name="unit_price'+iProduct+'"]').val(data[$(this).val()-1].value)
        });
}       


});
4

2 回答 2

1 
var data = [ { "id": "1", "label": 1, "value": "11.00" }, 
                 { "id": "2", "label": 2, "value": "21.00" }, 
                 { "id": "3", "label": 3, "value": "31.00" }, 
                 { "id": "4", "label": 4, "value": "40.00" }, 
                 { "id": "5", "label": 5, "value": "50.00" }, 
                 { "id": "6", "label": 6, "value": "60.00" }, 
                 { "id": "9", "label": 9, "value": "90.00" }, 
                 { "id": "8", "label": 8, "value": "80.00" }, 
                 { "id": "7", "label": 7, "value": "70.00" } 
               ];

for(var i=0; i<data.length; i++) {
    $('#product1').append('<option value="' + data[i].value + '">' + data[i].label+ '</option>');
    $('#product2').append('<option value="' + data[i].value + '">' + data[i].label+ '</option>');
}

$('#product1').change(function() {
    $('input[name="price1"]').val($(this).val())
});

$('#product2').change(function() {
    $('input[name="price2"]').val($(this).val())
});
​

也许你会接近这个决定。示例： http: //jsfiddle.net/YvZ9v/ ​</p>

于 2012-11-23T10:41:13.927 回答
1

您可以使用这样的代码绑定更改事件：

$( "#product1" ).change(function() {
    var nbProducts = data.length;
    for(var iProduct = 0; iProduct < nbProducts; iProduct++) {
        if(data[iProduct].id == this.value)
            $('#price1').val( data[iProduct].value );
    }
}

编辑 为了遍历所有产品输入，您只需要像这样迭代：

var nbProducts = data.length;
for(var iProduct = 1; iProduct <= nbProducts; iProduct++) {
    $('#product'+iProduct).change(function() {  
        // Same code as above...
    });
}
于 2012-11-23T10:59:14.837 回答