How to make a linked select in the calculator calculate the cost?

Have the calculator calculate the cost, I added a drop down list Material, you need to select Material1 value(price) Услуга1, Услуга2, Услуга3 was equal to for example 100, 200 and 300 and if you choose Материал2 250, 200, and 310 for example, and so on...
That is how to make dependable drop down lists

<div class="fade" id="lam">
 <div class="col-md-12">
 <select onchange="costCalculator()" id="mat" class="form-control">
 <option value disabled selected>Select material</option>
 <option value>Material1</option>
 <option value>Материал2</option>
 <option value>Материал3</option>
</select>
 <select onchange="costCalculator()" id="oneType" class="form-control">
 <option value="0" disabled selected>Select*</option>
 <option value="100">Услуга1</option>
 <option value="200">Услуга2</option>
 <option value="300" disabled>Услуга3</option>
</select>
 the <strong>Amount per sq m: <span id="oneRezult">0</span> <span class="rub">RUB</span></strong>

<hr>
 <div class="row">
 <div class="col">
 <p class="size">Width in metres: *<input type="text" class="tt" id="threeType" value="1" onchange="costCalculator()"></p>
</div>
 <div class="col">
 <p class="size">the Height in meters: *<input type="text" class="tt" id="fourType" value="1" onchange="costCalculator()"></p>
 </div> 
 <div class="col">
 <p class="size">Number: <input type="text" class="tt" id="kolType" value="1" onchange="costCalculator()"></p>
</div>
</div>
 the <strong>total: <span id="threeRezult">1</span> <span class="rub"></span> sq m</strong>

 <hr> <strong>Additional features:</strong><br>
<hr>
 <div class="row">
 <div class="col">
 <p>Услуга10: <input type="checkbox" id="twoType" value="20" onchange="costCalculator()"></p>
 the <strong>Amount: <span id="twoRezult">0</span> <span class="rub">RUB</span> </strong>
</div>
 <div class="col">
 <p>Услуга20: <input type="checkbox" id="provType" value="15" onchange="costCalculator()"></p>
 the <strong>Amount: <span id="provRezult">0</span> <span class="rub">RUB</span> </strong>
 </div> 
 <div class="col">
 <p>Услуга30: <input type="checkbox" id="lamType" value="150" onchange="costCalculator()" disabled></p>
 the <strong>Amount: <span id="lamRezult">0</span> <span class="rub">RUB</span> </strong>
</div>
</div>


<hr>

 <p class="result text-center">total Value: <span id="result">0</span> <span class="rub">RUB</span></p>
 <p class="text-center"><strong> text</strong></p>
 </div> 
</div>


costCalculator function() {
 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;
}


Thanks in advance )))
June 7th 19 at 15:05
1 answer
June 7th 19 at 15:07
Listen to the event on('change') each of select and depending on the val - hide / show the desired DOM elements. After that you can call in the event of a miscalculation of the desired value, if filled with the necessary data. Or You already want the answer to get the finished code?

Find more questions by tags JavaScriptjQuery