Услуги и товары одни и те же сущности.
Специально, чтобы тебя ни в жизнь ни один ПС не проиндексировал и не нашел, даже если все сантехники в мире сдохнут, чтобы не нашел ни один ПС, гавнокод в качестве примера как такое делается.
<!DOCTYPE html>
<html lang="ru" dir="ltr">
<head>
<meta charset="utf-8">
<script>
var
CURRENCY = ' руб.',
works={
title:'Услуга',
data:{
1:'Эмалировка',
2:'Старкрил 2',
3:'Жидкий акрил',
4:'Акриловый вкладыш'
},
},
params={
opt:{
title:'Опции',
data:{
1:'Установка уголка',
2:'Монтаж экрана',
3:'Монтаж слива',
4:'Счетчик горячей воды',
5:'Счетчик холодной воды'
}
},
hue:{
title:'Оттенок',
data:{
1:'Белый',
2:'Красный',
3:'Желтый',
4:'Синий'
}
},
len:{
title:'Длина, см',
data:{
1:'120',
2:'150',
3:'170',
4:'200'
}
}
},
offers={
1:{
price:1500,
params:{
len:{
1:1400,
2:1500,
3:1500
},
hue:{
1:0,
2:120,
3:150,
4:90
},
opt:{
1:1500,
2:1700,
3:2000,
4:3000,
5:2000
}
}
},
2:{
price:2500,
params:{
len:{
1:1200,
2:1300,
3:1700
},
hue:{
1:0,
2:220,
3:250,
4:190
},
opt:{
1:1200,
2:1500,
3:1800,
4:2900,
5:2500
}
}
},
3:{
price:1900,
params:{
len:{
1:1200,
2:1780,
3:1499
},
hue:{
1:0,
2:126,
3:145,
4:199
},
opt:{
1:1500,
2:1700,
3:2000,
4:3000,
5:2000
}
}
},
4:{
price:1500,
params:{
len:{
1:1400,
2:1500,
3:1500
},
hue:{
1:0,
2:120,
3:150,
4:90
},
opt:{
1:1500,
2:1700,
3:2000,
4:3000,
5:2000
}
}
}
}
total=0,prodList=calcButton=null;
function resetList(el){
v=el.querySelectorAll('select');
for(var i=0;i<v.length;i++)
v[i].selectedIndex=-1;
}
function renderParams(ev){
if(ev.target.nodeName!='SELECT') return;
var v=ev.target.value;
if(!(v in offers)) return;
var offer=offers[v],html=[];
total=offer.price;
for(v in offer.params) {
var h=[];
for(var p in offer.params[v])
h.push(renderOption(offer.params[v][p],params[v].data[p]
+' + '+offer.params[v][p]+CURRENCY));
html.push('<label>'+params[v].title+': </label>'
+'<select>'+h.join('')+'</select>'+'<br/><br/>');
}
prodList.innerHTML=html.join('');
resetList(prodList);
calcButton.disabled=false;
}
function renderOption(v,t){
return '<option value="'+v+'">'+t+'</option>';
}
function renderOptions(obj){
var html=[];
for(var p in obj)
html.push(renderOption(p,obj[p]+': '+offers[p].price+CURRENCY));
return html.join('');
}
function renderWorks(classname) {
var el=document.querySelector('.'+classname);
el.innerHTML='<label>'+works.title+': <label>'
+'<select>'+renderOptions(works.data)+'</select>';
resetList(el);
el.addEventListener('change',renderParams);
}
function renderTotal(){
v=prodList.querySelectorAll('select');
for(var i=t=0;i<v.length;i++)
t+= +v[i].value;
document.querySelector('.total-sum').textContent=(total+t)+CURRENCY;
}
</script>
</head>
<body>
<div class="filters-block"></div><br/><br/>
<div class="product-list"></div>
<button class="calc-total" disabled="disabled">Рассчитать</button><br/><br/>
<div class="total-sum"></div>
<script>
prodList=document.querySelector('.product-list');
calcButton=document.querySelector('.calc-total');
calcButton.addEventListener('click',renderTotal);
renderWorks('filters-block');
</script>
</body>
</html>