рони, это не намек на что вот демка возьмите и сделайте, просто прошу помощи как её реализовать.
|
Не так все делается. Сперва надо спроектировать структуру данных, где все барахло будет лежать.
|
т.е значения в обьектах не хранить или есть другой вариант?
|
dzho,
в одном обьекте структуру дерево создать, и всё в форму тогда change только на форму |
Без реляционной БД ты застрелишься в реальном масштабе с такой чухней. Другими словами ты откусил гораздо больше, чем сможешь проглотить. Ну или жуй.
Нужна таблица продуктов и таблица опций продуктов, минимально так: Таблица Автомобили. ID Название Таблица Цвет ID ProductID Название цвета Цена Таблица Опции ID ProductID Название опции Цена Технически так и делается, но ты мне покажи бизнес-логику. Как ты определишь цену на Мазда Красная Опция1, если у тебя в каждой блеать опции конечная цена продукта? Ты думал об этом, да, и придумал перевернуть все через жопу, то есть загнать все цвета и опции в запись продукта, то есть Таблица Автомобили. ID Название Название цвета 0 - Цена Название цвета 1 - Цена Название цвета 2 - Цена Название опции 1 - Цена Нифига не полегчало. Как ты выберешь Мазда Цвет 0 Опция 1, если выбрать можно только что-то одно? Нельзя же выбрать два цвета - красный и синий. Ну, технически можно, но это получится бред. Чтобы выбрать Опцию дополнительно к цвету, придется ввести еще признак, показывающий, что эту опцию можно выбрать дополнительно к уже выбранным, поскольку цвет - такая опция как и любая другая, то есть одно из потребительских свойств продукта. Твоя бредовая бизнес-логика и не дает тебе понять и реализовать этот бред. Делай нормально. Нормально это как выше. Цены за цвет и опции определяются как таковые, то есть как за отдельные товары, несмотря, что это опции. Это значит базовый цвет будет стоить 0, базовая опция - без которой нельзя продать машину, будет стоить 0. А все навороты - больше 0. Следовательно в продуктовой таблице цена за товар уже включает в себя базовую комплектацию и значит там есть цена Таблица Автомобили. ID Название Цена базовой комплектации |
Если машинки там чисто для примера, то действующее вещество твоего бреда вот где
Название Название цвета 0 - Цена Название цвета 1 - Цена Название цвета 2 - Цена Название опции 1 - Цена Из такого списка можно выбрать только одну опцию, а у тебя задумка, выбирать из него цвет по одному и еще опцию эту дополнительно. Конечно ты можешь захардкодить бредовую логику прямо в скрипп, ну захардкодь. |
зависимые селекты и сумма
:write:
вариант для медитации ... при условии product это начальная цена, всё остальное повышающие коэффициенты.
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.optionally:checked ~ .rez {
display: inline;
}
.optionally ~ .rez {
display: none;
}
</style>
</head>
<body>
<p>
Если Выбрал значения из первого select т.е mazda значения цен одни, а когда выбираешь например bmw<br>
то значения другие.
</p>
<form id="form" action="http://">
<!-- select product -->
<select class="car">
<option value="">Выбрать</option>
<option value="mazda">mazda</option>
<option value="lada">lada</option>
<option value="bmw">bmw</option>
</select>
<br>
<br>
<!-- color product -->
<select class="color">
<option value="">Выбрать</option>
<option value="red">Красный</option>
<option value="blue">Белый</option>
<option value="blue">Синий</option>
</select>
<br>
<br>
<!-- checkbox list -->
<br>
<br>
<!-- Здесь значение меняються от выбранных вариантов -->
<!-- size product -->
<input type="text" class="rez" placeholder="0 руб" readonly="readonly"> <!-- зависимость от первого select -->
<br>
<br>
<input type="text" class="rez" placeholder="0 руб" readonly="readonly"> <!-- зависимость от второго select -->
<br>
<br>
<input type="checkbox" class="optionally" id="opt"><label for="opt">дополнительный настройки
</label>
<br>
<input type="text" class="rez" placeholder="0 руб" readonly="readonly"> <!-- зависимость от checkbox -->
<br>
<label>Здесь суммируются значения котые выбрал пользователь</label><br>
<input type="text" class="summa" placeholder="Сумма">
</form>
<script>
window.addEventListener("DOMContentLoaded", function() {
var d = {
mazda: {
product: 350,
red: 450,
white: 500,
blue: 550,
option: 360
},
lada: {
product: 400,
red: 600,
white: 700,
blue: 350,
option: 660
},
bmw: {
product: 600,
red: 700,
white: 300,
blue: 340,
option: 360
}
},
f = document.querySelector("#form"),
g = f.querySelector(".summa"),
h = f.querySelectorAll(".rez"),
a = f.querySelectorAll(".car, .color, #opt"),
b;
f.addEventListener("change", function() {
var c = a[0].value;
b = [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[1].value = "";
g.value = b.reduce(function(b, a, c) {
h[c].value = a + " руб.";
return b + a
}, 0) + " руб."
})
});
</script>
</body>
</html>
|
Рони, спасибо это почти то что нужно:)
http://codepen.io/dzheysen/pen/amJYWJ на основе этого сделал превьюшку но есть сложности как реализовать добавленный функционал // Здесь проблема. Как сделать чтобы при выборе цвета была зависимость в значениях checkbox // например пользователь выбрал значение 1.20 и значения меняются // получаеться так если 1м.20см то значения c такой ценой // option: 1500, // optionTwo: 1400, // optionThree: 2000, // а если 1м.50см // option: 2400, // optionTwo: 0, // optionThree: 0, // optionFour: 0, // optionFive: 0 |
dzho,
не понимаю вашего описания, будет дерево, будет код. |
<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 // установка счетчиков хол. горячей воды Надеюсь расписал доходчиво:) |
| Часовой пояс GMT +3, время: 05:22. |