|
Сообщение от dzho
|
|
1м.40см
|
1м.50 см было
примерно так ... продолжение ...
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
</head>
<body>
<div class="block-form">
<form id="form" action="http://">
<h2>Наши услуги</h2>
<div class="block-left">
<!-- Выбор услуги -->
<select class="ListService">
<option value="">Выбрать</option>
<option value="Enamelling">Эмалировка</option>
<option value="Starkril">Старкрил 2</option>
<option value="liquidAcrylic">Жидкий акрил</option>
<option value="AcrylicLiner">Акриловый вкладыш</option>
</select>
<br>
<!-- Длина ванны -->
<select class="meters">
<option value="">Выбрать</option>
<option value="meterOne">1м.20 см</option>
<option value="meterTwo">1м.50 см</option>
<option value="meterThree">1м.70 см</option>
</select>
<!-- Опции услуг -->
<label for="opt">
<input type="checkbox" class="optionally" id="opt"><p>Цвет ванны</p>
</label>
<label for="opt1">
<input type="checkbox" class="optionally" id="opt1"><p>Установка уголка</p>
</label>
<label for="opt2">
<input type="checkbox" class="optionally" id="opt2"><p>Установка сливной системы</p>
</label>
<label for="opt3">
<input type="checkbox" class="optionally" id="opt3"><p>Установка экрана под ванну</p>
</label>
<label for="opt4">
<input type="checkbox" class="optionally" id="opt4"><p>Установка счетчиков.гор. холодной воды</p>
</label>
<label for="opt5">
<input type="checkbox" class="optionally" id="opt5"><p>Установка счетчиков.хол. горячей воды</p>
</label>
<h3>Итого</h3>
</div>
<div class="block-right">
<!-- checkbox list -->
<!-- Здесь значение меняются от выбранных вариантов -->
<!-- size product -->
<input type="text" class="rez" placeholder="0 руб" readonly="readonly"> <!-- зависимость от первого select -->
<input type="text" class="rez" placeholder="0 руб" readonly="readonly"> <!-- зависимость от второго select -->
<input type="text" class="rez" placeholder="0 руб" readonly="readonly">
<input type="text" class="rez" placeholder="0 руб" readonly="readonly">
<input type="text" class="rez" placeholder="0 руб" readonly="readonly">
<input type="text" class="rez" placeholder="0 руб" readonly="readonly">
<input type="text" class="rez" placeholder="0 руб" readonly="readonly">
<input type="text" class="rez" placeholder="0 руб" readonly="readonly">
<br>
</div>
<input type="text" class="summa" placeholder="Сумма">
</form>
</div>
<script>
window.addEventListener("DOMContentLoaded", function() {
var d = {
Enamelling: { // Эмалировка
product: 1500, // цена
meterOne: 1400, // стоимость длины ванны 1.20
meterTwo: 1500, // стоимость длины ванны 1.50
meterThree: 1500, //стоимость длины ванны 1.70
colorBath: 0, // стоимость цвета заливки
option: 1500, // checkbox установка уголка
optionTwo: 1400, // checkbox установка сливной системы
optionThree: 2000, // checkbox установка экрана под ванну
optionFour: 850, // установка счетчиков гор.холодн.воды
optionFive: 900 // установка счетчиков хол. горячей воды
},
Starkril: { // Старкрил 2
product: 2000, // цена
meterOne: 1400, // стоимость длины ванны 1.20
meterTwo: 1500, // стоимость длины ванны 1.50
meterThree: 1500, //стоимость длины ванны 1.70
colorBath: 0, // стоимость цвета заливки
option: 1500, // checkbox установка уголка
optionTwo: 1400, // checkbox установка сливной системы
optionThree: 2000, // checkbox установка экрана под ванну
optionFour: 850, // установка счетчиков гор.холодн.воды
optionFive: 900 // установка счетчиков хол. горячей воды
},
liquidAcrylic: { // Жидкий акрил
product: 3000, // цена
meterOne: 1500, // стоимость длины ванны 1.20
meterTwo: 2000, // стоимость длины ванны 1.50
meterThree: 2500, //стоимость длины ванны 1.70
colorBath: 0, // стоимость цвета заливки
option: 1500, // checkbox установка уголка
optionTwo: 1400, // checkbox установка сливной системы
optionThree: 2000, // checkbox установка экрана под ванну
optionFour: 850, // установка счетчиков гор.холодн.воды
optionFive: 900 // установка счетчиков хол. горячей воды
},
AcrylicLiner: { // Акриловый вкладыш
product: 1500, // цена
meterOne: 1400, // стоимость длины ванны 1.20
meterTwo: 3000, // стоимость длины ванны 1.20
meterThree: 3000, //стоимость длины ванны 1.70
colorBath: 2000, // стоимость цвета заливки
option: 2000, // checkbox установка уголка
optionTwo: 0, // checkbox установка сливной системы
optionThree: 2000, // checkbox установка экрана под ванну
optionFour: 850, // установка счетчиков гор.холодн.воды
optionFive: 900 // установка счетчиков хол. горячей воды
},
},
f = document.querySelector("#form"),
g = f.querySelector(".summa"),
h = f.querySelectorAll(".rez"),
a = f.querySelectorAll(".ListService, .meters, #opt,#opt1, #opt2, #opt3, #opt4,#opt5"),
b,
k = ["colorBath","option","optionTwo","optionThree","optionFour","optionFive"],
m = {Starkril : {meterOne : { option: 1500,
optionTwo: 1400,
optionThree: 2000},
meterTwo : {
option: 2400,
optionTwo: 0,
optionThree: 0,
optionFour: 0,
optionFive: 0
},
meterThree : {
colorBath: 0,
option: 2400,
optionTwo: 0,
optonThree: 1000,
optionFour: 0,
optionFive: 0
} } }
;
f.addEventListener("change", function() {
var c = a[0].value;
b = [0, 0, 0, 0, 0 , 0, 0];
if (c) {
b[0] = d[c].product;
var e = a[1].value;
e && (b[1] = d[c][e]);
k.forEach(function(el,i) {
a[i+2].checked && (b[i+2] = m[c] && m[c][e] && m[c][e][el] !== void(0) ? m[c][e][el] : d[c][el] )
});
} else a[2].value = "";
g.value = b.reduce(function(b, a, c) {
h[c].value = a + " руб.";
return b + a
}, 0) + " руб."
})
});
</script>
</body>
</html>