填充從數據陣列的價格取決於所選擇的產品

Question

我有一個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和price2的產品2。

---

這裏是＃產品1

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


}); 

Answer 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/

Answer 2

你可以用這樣的代碼更改事件綁定：

$("#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... 
    }); 
}