БЛОГ НА HUSL


Отслеживание событий на select, js

Автор вопроса: ws17

Первый селект, у него есть data-priceid="1", таким методом я вписываю 1,2,3 и так далее, подставляю из див блока цены нужные для нужного варианта в селекте.

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

Тут все работает, подставляю и вывожу полученную цену с селекта 1 в див блок.

Селект 2, только у одного выбранного варианта есть цена data-price="50", ее я вывожу в див блок. Тож все окей.

Две эти суммы я пытаюсь прибавить к друг другу и вывести в конечный результат, но что-то у меня не получилось. Желаемое поведение: выводить с селекта 1 полученную сумму в результат id sum при его изменении, и при изменении select2 прибавить число к данным из select1 и вывести туда же в id sum.

//для выбранной категории подставляем цену из id блоков. и далее выводим в диве
$('#cel1').change(function() {
  var $selected = $(this).find(":selected");
  $('#resultPrice').html($("#prices div").eq(+$selected.data("priceid") - 1).text());
})

//при выборе варианта во втором селекте, где есть цена data-price, выводим цену в див
$('#cel2').change(function() {
  var $selected = $(this).find(":selected");
  $('#resultPriceTaxi').html($selected.data("price"));
})

//берем обе полученные суммы из див и плюсуем, и выводим в диве
  const resultPrice = $("#resultPrice").html().replace();
  const resultPriceTaxi = $("#resultPriceTaxi").html().replace();
  let rezult = (Number(resultPrice) + Number(resultPriceTaxi)).toString().replace(); //плюсуем две суммы
  $('#sum').html(rezult);
.block{
  width: 200px;
}
#resultPrice{
  font-size: 18px;
  color: #B848FF;
}
#resultPriceTaxi{
  font-size: 18px;
  color: #7AB900;
}
#sum{
  font-size: 22px;
  color: #FF2525;
}
<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-priceid="1">Категория (А)</option>
  <option value="Категория (B)" data-priceid="2">Категория (B)</option>
  <option value="Категория (D)" data-priceid="3">Категория (D)</option>
  <option value="Категория (E)" data-priceid="4">Категория (E)</option>
  <option value="Категория (C)" data-priceid="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>


Источник

Ответы (1 шт):

Автор решения: Alexandr

Две эти суммы я пытаюсь прибавить к друг другу и вывести в конечный результат, но что-то у меня не получилось. Надо выводить с селекта 1 полученную сумму в результат id sum, но как только я в селекте 2 выбираю вариант с ценой, то цена эта плюсуеться с той суммой что вывелась с селекта1 и выводиться там же в конечном результате. id sum.

Добавьте функцию и запускате ее при изменении ваших селектов

//для выбранной категории подставляем цену из id блоков. и далее выводим в диве
$('#cel1').change(function() {
  var $selected = $(this).find(":selected");
  $('#resultPrice').html($("#prices div").eq(+$selected.data("priceid") - 1).text());
  getRes()
})

//при выборе варианта во втором селекте, где есть цена data-price, выводим цену в див
$('#cel2').change(function() {
  var $selected = $(this).find(":selected");
  $('#resultPriceTaxi').html($selected.data("price"));
  getRes()
})


  let getRes = () =>{
    //берем обе полученные суммы из див и плюсуем, и выводим в диве
  const resultPrice = $("#resultPrice").html().replace();
  const resultPriceTaxi = $("#resultPriceTaxi").html().replace();
  let rezult = (Number(resultPrice) + Number(resultPriceTaxi)).toString().replace() + ' руб'; //плюсуем две суммы
  $('#sum').html(rezult);
  }
.block{
  width: 200px;
}
#resultPrice{
  font-size: 18px;
  color: #B848FF;
}
#resultPriceTaxi{
  font-size: 18px;
  color: #7AB900;
}
#sum{
  font-size: 22px;
  color: #FF2525;
}
<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-priceid="1">Категория (А)</option>
  <option value="Категория (B)" data-priceid="2">Категория (B)</option>
  <option value="Категория (D)" data-priceid="3">Категория (D)</option>
  <option value="Категория (E)" data-priceid="4">Категория (E)</option>
  <option value="Категория (C)" data-priceid="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>

→ Ссылка

licensed under cc by-sa 3.0 with attribution.