Здравствуйте.
Подскажите пожалуйста, как подружить калькулятор с chosen или любым другим кастомизатором select.
Когда выбираю в select option без использования плагина chosen или ему подобных, значения изменяются в поле сумма, когда с любым плагином, то значения в поле сумма обновляются только после клика на checkbox.
Прошу помощи. Заранее благодарю
<form name="calc" id="calc" action="calc.php" method="post">
<div class="left_block_calc">
<!-- Персональные даные -->
<div class="calc_header_title_personal">Персональные даные</div>
<input type="text" class="styler" name="name" placeholder="Имя" required="required">
<input type="tel" class="styler user-phone" name="tel" placeholder="Номер телефона" required="required">
<input type="email" class="styler" name="email" placeholder="Email">
<textarea class="styler" rows="5" cols="20" wrap="hard" name="message" maxlength="100" placeholder="Комментарий"></textarea>
</div>
<div class="right_block_calc">
<!-- Выбор услуги -->
<div class="calc_header_title_calc">Конструктор</div>
<br/>
<div class="view">
</div><select name="site" placeholder="Тип сайта" class="test site">
<option value="landing">Лендинг</option>
<option value="card">Cайт визитка</option>
<option value="intr_shop">Интернет магазин</option>
<option value="corp">Корпоративный сайт</option>
<option value="portal">Портал</option>
<option value="catalog">Каталог</option>
<option value="self">Самописный проект</option>
</select>
<div style="text-align:center;">
<div style="margin-bottom:20px;"></div>
<!-- Выбор услуги -->
<!-- Пакет услуг -->
<select name="pack" data-placeholder="Пакет услуг" class="pack calculate" required>
<option></option>
<option value="simple">Обычный</option>
<option value="middle">Премиум</option>
<option value="pro">Профессиональный</option>
</select>
<div style="margin-bottom:20px;"></div>
</div>
<!-- Пакет услуг -->
<!-- Опции услуг -->
<div class="calc_title">Опции</div>
<div style="text-align:center; border: 1px solid #CCCCCC;border-radius:2px;padding-top: 5px;">
<div id="calc-option">
<label>
<input type="hidden" class="optionally" id="opt">
</label>
<label>
<input name="optn[1]" type="checkbox" class="optionally" id="opt1" value="SEO"><span>SEO</span>
</label>
</div>
<div id="calc-option">
<label>
<input name="optn[2]" type="checkbox" class="optionally" id="opt2" value="Продвижение"><span>Продвижение</span>
</label>
</div>
<div id="calc-option">
<label>
<input name="optn[3]" type="checkbox" class="optionally" id="opt3" value="Монетизация"><span>Монетизация</span>
</label>
</div>
<div id="calc-option">
<label>
<input name="optn[4]" type="checkbox" class="optionally" id="opt4" value="Раскрутка"><span>Раскрутка</span>
</label>
</div>
</div>
<!-- Опции услуг -->
<!-- Здесь значение меняются от выбранных вариантов -->
<input type="hidden" class="result" placeholder="0 грн" readonly="readonly"> <!-- зависимость от первого select -->
<input type="hidden" class="result" placeholder="0 грн" readonly="readonly"> <!-- зависимость от второго select -->
<input type="hidden" class="result" placeholder="0 грн" readonly="readonly">
<input type="hidden" class="result" placeholder="0 грн" readonly="readonly">
<input type="hidden" class="result" placeholder="0 грн" readonly="readonly">
<input type="hidden" class="result" placeholder="0 грн" readonly="readonly">
<input type="hidden" class="result" placeholder="0 грн" readonly="readonly">
<!-- Здесь значение меняются от выбранных вариантов -->
<!-- Общая сумма -->
<input name="sum" type="text" class="styler summa" placeholder="Сумма">
</div>
<button type="submit" id="blabla" class="main-form-btn">Заказать <span>→</span></button>
</form>
</div>
</div>
</div>
</div>
$(function () {
var d = {
// Лендинг
landing: {
product: 4000, // лендинг
simple: 400, // пакет простой
middle: 500, // пакет средний
pro: 700, //пакет профессиональный
seo: 1500, // checkbox seo
promo: 1400, // checkbox раскрутка
advance: 2000, // checkbox продвижение
profit: 850 // checkbox монетизация
},
// Сайт визитка
card: {
product: 3000, // сайт визитка
simple: 1400, // пакет простой
simple: 400, // пакет простой
middle: 500, // пакет средний
pro: 700, //пакет профессиональный
seo: 1500, // checkbox seo
promo: 1400, // checkbox раскрутка
advance: 2000, // checkbox продвижение
profit: 850 // checkbox монетизация
},
// Интернет магазин
intr_shop: {
product: 12000, // интернет магазин
simple: 400, // пакет простой
middle: 500, // пакет средний
pro: 700, //пакет профессиональный
seo: 1500, // checkbox seo
promo: 1400, // checkbox раскрутка
advance: 2000, // checkbox продвижение
profit: 850 // checkbox монетизация
},
// Корпоративный сайт
corp: {
product: 5000, // корпоративный сайт
simple: 400, // пакет простой
middle: 500, // пакет средний
pro: 700, //пакет профессиональный
seo: 1500, // checkbox seo
promo: 1400, // checkbox раскрутка
advance: 2000, // checkbox продвижение
profit: 850 // checkbox монетизация
},
// Портал
portal: {
product: 5500, // портал
simple: 400, // пакет простой
middle: 500, // пакет средний
pro: 700, //пакет профессиональный
seo: 1500, // checkbox seo
promo: 1400, // checkbox раскрутка
advance: 2000, // checkbox продвижение
profit: 850 // checkbox монетизация
},
// Каталог
catalog: {
product: 6000, // каталог
simple: 400, // пакет простой
middle: 500, // пакет средний
pro: 700, //пакет профессиональный
seo: 1500, // checkbox seo
promo: 1400, // checkbox раскрутка
advance: 2000, // checkbox продвижение
profit: 850 // checkbox монетизация
},
// Самописный проект
self: {
product: 15000, // самописный проект
simple: 400, // пакет простой
middle: 500, // пакет средний
pro: 700, //пакет профессиональный
seo: 1500, // checkbox seo
promo: 1400, // checkbox раскрутка
advance: 2000, // checkbox продвижение
profit: 850 // checkbox монетизация
}
},
f = document.querySelector("#calc"),
g = f.querySelector(".summa"),
h = f.querySelectorAll(".result"),
a = f.querySelectorAll(".site, .pack, #opt1, #opt2, #opt3, #opt4"),
b,
k = ["seo","promo","advance","profit"];
f.addEventListener("change", function() {
var c = a[0].value;
b = [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] = d[c][el] )
});
} else a[2].value = "";
g.value = b.reduce(function(b, a, c) {
h[c].value = a + " грн.";
return b + a
}, 0) + " грн."
})
});
