JSFiddle - React, Tailwind, and code Playground

by vlit

HTML

<script src="https://bazaub.ru/media/admin/js/2.2.4jquery.min.js"></script>
<link rel="stylesheet" href="https://bazaub.ru/media/celect2/select2.min.css" />
<script src="https://bazaub.ru/media/celect2/select2.min.js"></script>
<script src="https://bazaub.ru/media/celect2/ru.js"></script>

<div class="block">
<select name="cel1" class="js-select2" id="cel1">
  <option value="0">Выберите</option>
  <option value="Категория (А)" data-price="1">Категория (А)</option>
  <option value="Категория (B)" data-price="2">Категория (B)</option>
  <option value="Категория (D)" data-price="3">Категория (D)</option>
  <option value="Категория (E)" data-price="4">Категория (E)</option>
  <option value="Категория (C)" data-price="5">Категория (C)</option>
</select>
<br />
<div id="prices" style="display:none">
  <div id="catAprice">1000</div>
  <div id="catBprice">1100</div>
  <div id="catDprice">1200</div>
  <div id="catEprice">1300</div>
  <div id="catCprice">1400</div>
</div>
<br />
<select name="cel2" class="js-select2" id="cel2">
  <option value="0" data-price="">Выберите</option>
  <option value="Вариант 1" data-price="">Вариант 1</option>
  <option value="Вариант 2" data-price="50">Вариант 2 (+50 руб, к сумме)</option>
  <option value="Вариант 3" data-price="">Вариант 3</option>
  <option value="Вариант 4" data-price="">Вариант 4</option>
  <option value="Вариант 5" data-price="">Вариант 5</option>
</select>

<br />
<div id="resultPrice"></div>
<div id="resultPriceTaxi"></div>
<br />
<br />
<div id="sum"> руб</div>
</div>















<script>
  $(document).ready(function () {
    $(".js-select2").select2({
      minimumResultsForSearch: Infinity,
      language: "ru",
    });
  });
</script>

CSS

.block{
  width: 200px;
}
#resultPrice{
  font-size: 18px;
  color: #B848FF;
}
#resultPriceTaxi{
  font-size: 18px;
  color: #7AB900;
}
#sum{
  font-size: 22px;
  color: #FF2525;
}

JavaScript

//Выставляем цены по умолчанию
var firstPrice = 0;
var secondPrice = 0;


//Получаем значение цены1 при событии изменения селекта
$('#cel1').change(function() {
  firstPrice = $(this).find(":selected").data("price");
  $('#resultPrice').html(firstPrice);
});

//Тоже самое делаем со 2 ценой, но по уму, мы должны проверять оба события, а также обе цены, прежде чем суммировать цены, но мне лень
$('#cel2').change(function() {
  secondPrice = $(this).find(":selected").data("price");
  $('#resultPriceTaxi').html(secondPrice);
  
  let rezult = firstPrice + secondPrice; //плюсуем две суммы
  console.log(rezult);
  $('#sum').html(rezult);
});