<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">
<br>
<input type="text" class="summa" placeholder="Сумма">
</form>
</div>
</div>
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", "#opt2", "#opt3","#opt4","#opt5"),
b;
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]);
a[2].checked && (b[2] = d[c].option )
} else a[2].value = "";
g.value = b.reduce(function(b, a, c) {
h[c].value = a + " руб.";
return b + a
}, 0) + " руб."
})
});
Сейчас не работает вызов опций начинаю от "Установка уголка" просмотрев Ваш код не совсем понял как подцепить эти их
Так же логика при выборе услуги " Старкрил2" получается пользователь выбирает эту услугу
размер ванны 1.20 то
изменяются значения опций
option: 1500, // checkbox установка уголка
optionTwo: 1400, // checkbox установка сливной системы
optionThree: 2000, // checkbox установка экрана под ванну
а если выбирает "Стакрил2" размер ванны 1.50
изменяются значения опций
option: 2400, // checkbox установка уголка
optionTwo: 0, // checkbox установка сливной системы
optionThree: 0, // checkbox установка экрана под ванну
optionFour: 0, // установка счетчиков гор.холодн.воды
optionFive: 0 // установка счетчиков хол. горячей воды
значения изменяются при выборе 1.70
colorBath: 0, // цвет ванны
option: 2400, // checkbox установка уголка
optionTwo: 0, // checkbox установка сливной системы
optionThree: 1000, // checkbox установка экрана под ванну
optionFour: 0, // установка счетчиков гор.холодн.воды
optionFive: 0 // установка счетчиков хол. горячей воды
Надеюсь расписал доходчиво