<table border="1">
<tr>
<td>
<select name="product[]">
<option value="1" data-price="100">Продукт 1</option>
<option value="2" data-price="500">Продукт 1</option>
</select>
</td>
<td>
<input name="quantity[]" />
</td>
<td>
<input name="total[]" readonly="" />
</td>
</tr>
<tr>
<td>
<select name="product[]">
<option value="1" data-price="100">Продукт 1</option>
<option value="2" data-price="500">Продукт 1</option>
</select>
</td>
<td>
<input name="quantity[]" />
</td>
<td>
<input name="total[]" readonly="" />
</td>
</tr>
<tfoot>
<tr>
<td>Итого:</td>
<td><input name="total" readonly="" /></td>
</tr>
</tfoot>
</table>
<script>
(function(){
var selects = document.getElementsByName('product[]'),
inputs = document.getElementsByName('quantity[]'),
outputs = document.getElementsByName('total[]'),
output = document.getElementsByName('total')[0];
for (var i = 0; i < selects.length; i++) {
selects[i].onchange = inputs[i].oninput = handleChange.bind(i);
}
function handleChange() {
var price = selects[this].selectedOptions[0].dataset.price;
var count = +inputs[this].value || 0;
outputs[this].value = price * count;
var total = 0;
for (var i = 0; i < outputs.length; i++) {
total += +outputs[i].value;
}
output.value = total;
}
})();
</script>
Не будет работать в старых браузерах. Но это можно поправить в принципе.