JSFiddle - React, Tailwind, and code Playground

by Vitaly Volovich

HTML

<p id="price">0</p>

<select id="one">
  <option>Не выбранно</option>
  <option>1 район</option>
  <option>2 район</option>
  <option>3 район</option>
</select>

<select id="two" disabled>
  <option>Не выбранно</option>
  <option>100м</option>
  <option>200м</option>
</select>

JavaScript

var priceList = {
  area : [2000, 5000, 6000], 
  distance : [11, 22]
}, $one = $("#one"), $two = $("#two"), $price = $("#price");

$one.change(function(){
   $two.attr("disabled" , !this.selectedIndex)
        .get(0).selectedIndex = 0;
   $price.text(0);
});

$two.change(function(){
   var i = this.selectedIndex,
       r = $one.get(0).selectedIndex - 1;
   $price.text(i ? priceList.area[r] * priceList.distance[i - 1] : 0);
});