Как сделать связанные select в калькуляторе расчёта стоимости?

Question

[Rufars]

Есть калькулятор расчёта стоимости, я добавил выпадающий список Материал, нужно чтобы при выборе Материал1 значение(цена) Услуга1, Услуга2, Услуга3 была равным к примеру 100, 200 и 300 а если выбрать Материал2 250, 200 и 310 к примеру и так далее...
То есть как сделать зависящие выпадающие списки

<div class="fade" id="lam">
	<div class="col-md-12">
		<select onchange="costCalculator()" id="mat" class="form-control">
			<option value="" disabled selected>Выбрать материал*</option>
			<option value="">Материал1</option>
			<option value="">Материал2</option>
			<option value="">Материал3</option>
		</select>
		<select onchange="costCalculator()" id="oneType" class="form-control">
			<option value="0" disabled selected>Выбрать услугу*</option>
			<option value="100">Услуга1</option>
			<option value="200">Услуга2</option>
			<option value="300" disabled>Услуга3</option>
		</select>
		<strong>Сумма за кв.м: <span id="oneRezult">0</span> <span class="rub">руб.</span></strong>

		<hr>
		<div class="row">
			<div class="col">
				<p class="razmer">Ширина в метрах: *<input type="text" class="tt" id="threeType" value="1" onchange="costCalculator()" /></p>
			</div>
			<div class="col">
				<p class="razmer">Высота в метрах: *<input type="text" class="tt" id="fourType" value="1" onchange="costCalculator()" /></p>
			</div> 
			<div class="col">
				<p class="razmer">Количество: <input type="text" class="tt" id="kolType" value="1" onchange="costCalculator()" /></p>
			</div>
		</div>
		<strong>Итого: <span id="threeRezult">1</span> <span class="rub"></span> кв.м</strong>

		<hr> <strong>Дополнительные услуги:</strong><br>
		<hr>
		<div class="row">
			<div class="col">
				<p>Услуга10: <input type="checkbox" id="twoType" value="20" onchange="costCalculator()" /></p>
		   <strong>Сумма: <span id="twoRezult">0</span> <span class="rub">руб.</span> </strong>
			</div>
			<div class="col">
				<p>Услуга20: <input type="checkbox" id="provType" value="15" onchange="costCalculator()" /></p>
		<strong>Сумма: <span id="provRezult">0</span> <span class="rub">руб.</span> </strong>
			</div> 
			<div class="col">
				<p>Услуга30: <input type="checkbox" id="lamType" value="150" onchange="costCalculator()"  disabled></p>
		<strong>Сумма: <span id="lamRezult">0</span> <span class="rub">руб.</span> </strong>
			</div>
		</div>


		<hr>

		<p class="result text-center">Стоимость итого: <span id="result">0</span> <span class="rub">руб.</span></p>
		<p class="text-center"><strong> текст</strong></p>
	</div>                                
</div>

function costCalculator() {
    var oneType = document.getElementById("oneType");
    var twoType = document.getElementById("twoType");
    var threeType = document.getElementById("threeType");
    var fourType = document.getElementById("fourType");
    var kolType = document.getElementById("kolType");
    var result = document.getElementById("oneType");
    var result = document.getElementById("twoType");
    var result = document.getElementById("threeType");
    var result = document.getElementById("fourType");
    var result = document.getElementById("kolType");
    var result = document.getElementById("result");
    var onePrice = 0;
    var twoPrice = 0;
    var twoPrice1 = 0;
    var twoPrice2 = 0;
    var threePrice = 0;
    var price = 0;
    onePrice = parseInt(oneType.options[oneType.selectedIndex].value);
    threePrice = (parseFloat(threeType.value .replace(/[,]+/g, '.')) * parseFloat(fourType.value .replace(/[,]+/g, '.')) * parseInt(kolType.value)).toFixed(2);
    twoPrice = ((twoType.checked == true) ? parseInt(twoType.value) : 0) * (parseFloat(threeType.value) + parseFloat(fourType.value)) * 2 * parseInt(kolType.value);
    provPrice = ((provType.checked == true) ? parseInt(provType.value) : 0) * (parseFloat(threeType.value) + parseFloat(fourType.value)) * 2 * parseInt(kolType.value);
    lamPrice = ((lamType.checked == true) ? parseInt(lamType.value) : 0) * (parseFloat(threeType.value) * parseFloat(fourType.value)) * parseInt(kolType.value);
    price = ((parseInt(twoPrice) + parseInt(provPrice) + parseInt(lamPrice)) + parseFloat(threeType.value .replace(/[,]+/g, '.')) * (parseFloat(fourType.value .replace(/[,]+/g, '.')) * parseInt(kolType.value) * parseInt(oneType.options[oneType.selectedIndex].value))).toFixed(2);
    oneRezult.innerHTML = onePrice;
    twoRezult.innerHTML = twoPrice;
    provRezult.innerHTML = provPrice;
    lamRezult.innerHTML = lamPrice;
    threeRezult.innerHTML = threePrice;
    result.innerHTML = price;
}

Заранее благодарен )))

Answer 1

[Владимир Скибин]

Слушайте событие on('change') у каждого селекта и в зависимости от нужного val - скрывайте / показывайте нужные DOM элементы. После этого можете вызывать событие просчета нужной стоимости, если заполнены необходимые данные. Или Вы уже хотите в ответе получить готовый код?