How to make linked selects in cost calculator?

Question

JavaScript

There is a cost calculator, I added a Material drop-down list, it is necessary that when choosing Material1 , the value (price) of Service1 , Service2 , Service3 be equal to, for example , 100, 200 and 300, and if you select Material2 250, 200 and 310, for example, and so on .. i.e.
how to make dependent dropdown lists

<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;
}

Thanks in advance )))

Answer 1

Listen to the on('change') event for each select and, depending on the desired val, hide / show the required DOM elements. After that, you can call the event of calculating the required cost if the necessary data is filled in. Or do you already want to receive a ready-made code in the answer?