Я на JQ, чтобы короче:
<form method="POST" action="send.php" id="order">
<label>Размер: </label>
<select name="size" required>
<option value="" disabled selected>Выбрать</option>
<option value="1">10x10</option>
<option value="2">20x20</option>
<option value="3">30x30</option>
</select><br />
<label>Тип: </label>
<select name="type" required>
<option value="" disabled selected>Выбрать</option>
<option data-price="[100,200,300]" value="1">Тип 1</option>
<option data-price="[150,250,350]" value="2">Тип 2</option>
<option data-price="[200,300,400]" value="3">Тип 3</option>
</select><br />
<label>рамка: </label>
<select name="frame">
<option value="">Выбрать</option>
<option data-price="[100,200,300]" value="1">Рамка 1</option>
<option data-price="[150,250,350]" value="2">Рамка 2</option>
<option data-price="[200,300,400]" value="3">Рамка 3</option>
</select><br />
<label>упаковка: </label>
<select name="packing">
<option value="">Выбрать</option>
<option data-price="[100,200,300]" value="1">Красная</option>
<option data-price="[150,250,350]" value="2">Синяя</option>
<option data-price="[200,300,400]" value="3">Зеленая</option>
</select><br />
Итого: <output name="total"></output><br />
<input type="submit" value="Заказать">
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$('#order').on('change', 'select', function(e) {
var f = e.delegateTarget, p = $('select', f), size = p.eq(0).children(':selected').index()-1, v = 0;
if(!p.filter(function() {
return this.required && !this.value
}).length) {
$.each(p.slice(1), function() {
v += this.value ? $(this).children(':selected').data('price')[size] : 0
});
f.total.value = v;
}
});
</script>
Правильно считает?