Леонид777,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>;</title>
</head>
<body>
<div class="genius-calculator">
<select id="tirazh">
<option selected></option>
<option value="1">100шт</option>
<option value="2">200шт</option>
<option value="3">300шт</option>
<option value="4">400шт</option>
<option value="5">500шт</option>
<option value="6">600шт</option>
<option value="7">700шт</option>
<option value="8">800шт</option>
<option value="9">900шт</option>
<option value="10">1000шт</option>
<option value="11">1500шт</option>
<option value="12">2000шт</option>
</select>
- Тираж;
<br />
<br />
<select id="razmer">
<option selected></option>
<option value="size1">22,5 x 34см</option>
<option value="size2">30 x 40см</option>
<option value="size3">36 x 45см</option>
<option value="size4">38 x 50см</option>
<option value="size5">45 x 50см</option>
<option value="size6">60 x 50см</option>
<option value="size7">70 x 50см</option>
</select>
- Размер пакета;
<br />
<br />
<select id="cvet"></select>
- Цвет пакета;
<br />
<br />
<select id="nanesenie">
<option selected></option>
<option value="1">1 + 0</option>
<option value="2">2 + 0</option>
<option value="3">3 + 0</option>
<option value="4">4 + 0</option>
</select>
- Количество цветов нанесения;
<br />
<br />
<button>Рассчитать!</button>
<div style="font-weight:bold" id="result"></div>
</div>
<script>
(function(window, document) {
var genius_calc = function(parent) {
parent = document.querySelector(parent);
if (!parent) return;
// сделал вручной ввод, чтобы тс поработал
var amazing_inputs = [
'100,22,5x34,белый,2+0',
'200,30x40,белый,2+0'
];
// не хотел делать объектами
var assoc_prices = ['500','800'];
var sizes = ['22,5x34', '30x40'];
var assoc_colors = ['белый,черный', 'красный,белый,синий'];
var re = /[\s|см|шт]/g; // воскресная лень
return {
init: function() {
parent.addEventListener('click', this.calculate.bind(this));
parent.addEventListener('change', this.fillColors.bind(this));
},
fillColors: function(e) {
var sel = document.getElementById('cvet');
if (!sel) return;
if (e.target.tagName == 'SELECT' && e.target.id == 'razmer') {
var opt = e.target.options.selectedIndex;
opt = e.target.options[opt];
var val = opt.textContent.replace(re, '');
var f = this.find(val, sizes);
if (sel && sel.firstElementChild) {
while (sel.firstElementChild) {
sel.removeChild(sel.firstElementChild);
}
}
if (typeof(f) == 'number') {
var s = assoc_colors[f];
if (sel) {
s.split(',').forEach(function(v) {
var option = document.createElement('option');
option.textContent = v;
sel.appendChild(option);
});
}
}
}
},
collect: function(e) {
var selects = parent.querySelectorAll('select');
var arr = [];
[].forEach.call(selects, function(select, indx) {
var opt = select.options.selectedIndex;
opt = select.options[opt];
if (opt)
arr.push(opt.textContent.replace(re, '').toLowerCase());
});
return arr.join(',');
},
find: function(str, variable) {
var indx = variable.indexOf(str);
if (~indx) return indx;
return false;
},
dump: function(n) {
document.getElementById('result').textContent = assoc_prices[n];
},
calculate: function(e) {
if (e.target.tagName == 'BUTTON') {
var c = this.collect();
var f = this.find(c, amazing_inputs);
if (typeof(f) == 'number')
this.dump(f);
}
}
};
};
var gc = genius_calc('.genius-calculator');
gc.init();
})(window, document);
</script>
</body>
</html>