Как сократить код для селектов?

Question

[Minningt]

Привет всем. Подскажите, как сократить ужасный код на JS ибо есть 6-8 селектов и код будет огромным, с тонной переменных.

Делаю на сайте так, чтобы при выбранном значении в селекте появлялась стоимость товара, изображение его. Типа как тут www.compday.ru/configurator.html
Изначально скрыто всё. Всё работает, но как выше я сказал, у меня много селектов, а кода огромное кол-во просто....

Вот для 1 селекта.
JS code - jsfiddle.net/f2Lsxh73/1

<tr>
<td>Процессор</td>
<td>
<?php
echo "<div class='newselect'>";
echo "<select class='chosen' id='chosenmak' style='width:540px;' name='maker' onChange='getpricecpu()'>";
echo '<option value="0">-- Выбрать --</option>';
foreach ($arr_get as $value) {
$ID   = $value['ID'];
$Price  = $value['Price'];
$Model = $value['Model'];
$photo = $value['photo'];
echo '<option data-price="'.$Price.'" data-image="'.$photo.'" value="'.$Model.'">'
."$Price"."  грн. ----"." $Manufacture"." '</option>';
}
echo "</select>";
echo "</div>";
echo "<span id='model'><img src='$photo' id='preview'/></span>";
echo "<td><input type='number' min='1' id='kol_cpu' name='kol_cpu' onChange='sumprice()'></td>";
echo "<td><input class='label' id='price_cpu' name='price_cpu' readonly /></td>";
?>
</td>
</tr>

Во втором селекте и далее почти тоже самое, но массив foreach состоит из других данных немного

Answer 1

[Сергей]

Переписать функцию вот так и передавать id селекта как параметр не пробовали?

function sumprice(id){
		var calculate = 0;
		var sum_main = document.getElementById("sum_main");
		var maker = document.getElementById(id);
		var pricem = maker.options[maker.selectedIndex].getAttribute("data-price");
		var cpu1 = document.getElementById("kol_cpu").value;
		calculate = cpu1*pricem;
		var result = document.getElementById("price_cpu");
    	result.value = calculate;
    	document.getElementById('sum_main').innerHTML = result.value;
	}

Comments

[Minningt]

я поменял sumprice1 на sumprice(id). Не работает.
Как видите по моему коду - я новичок. Гигантский кусок кода только для 1 селекта ( скрывать всё, показывать и т.д)....

[Сергей]

а при вызове sumprice вы в него id нужного селекта передаете?

[Minningt]

Сергей: да. пишу sumprice(chosenmak)
var maker = document.getElementById(chosenmak);
Могу отблагодарить(печенье), если поможете нормально выводить данные

[Сергей]

Minningt: Кавычки поставьте, это же строка
var maker = document.getElementById('chosenmak');