Вывод из двух селектов цену в див блоки, далее эти две цены плюсуем и выводим, как доработать?

Question

[Антон Вебсайтовский]

Всем привет, почти все реализовал, но не доделал.

Первый селект, у него есть 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, но как только я в селекте 2 выбираю вариант с ценой, то цена эта плюсуеться с той суммой что вывелась с селекта1 и выводиться там же в конечном результате. id sum.

Рабочая схема тут:
https://jsfiddle.net/vlit/14f6t52q/28/

Answer 1

[Антон Вебсайтовский]

Вообщем вот решение

//для выбранной категории подставляем цену из 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();
  const resultPriceTaxi = $("#resultPriceTaxi").html();
  let rezult = (Number(resultPrice) + Number(resultPriceTaxi)).toString() + ' руб'; //плюсуем две суммы
  $('#sum').html(rezult);
  }

Answer 2

[Одиночка Айс]

АБСОЛЮТНО все неправильно...

1. Зачем складывать цены отдельно, а потом героически их искать через id в селекте?
2. Что дает .replace() после .html()?
3. Переменные создаем на событии change, а потом удивляемся
4. Выводим результат до всех изменений, а потом удивляемся
5. Не делаем проверки на выбранное значение в селекте, то-то потом удивимся

Я на jsfiddle не помню пароль, да и лень, немного поправил ошибки (главное понять принцип), НО:
1. Нет проверки на undefinded значения
2. Я забил на событие change, ибо лень
3. Гуру JS обосрут и меня, ибо всегда есть кто-то лучше тебя

//Выставляем цены по умолчанию
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);
});

Забыл сказать, что в обоих селектах нужно сделать data-price у option (вместо data-priceid у первого селекта)

Comments

[Антон Вебсайтовский]

Критика есть, а как по твоему правильно?

[Одиночка Айс]

Антон Вебсайтовский, дополнил ответ, НО никогда так не делайте, я просто на скорую руку наваял, чтобы показать принцип

[Антон Вебсайтовский]

Одиночка Айс, ни когда так не делал как сделал сообщением выше? то есть твой вариант, так нельзя делать.

[Антон Вебсайтовский]

А зачем цены по умолчанию выводить, чтобы потом 0, показывался, а как ноль не показывать, а скрыть, просто не вижу смысла показывать 0.

[Одиночка Айс]

Антон Вебсайтовский, я к тому, что я опустил проверки, и суммирование у меня не в том месте, главное понять, что их можно получить при событии change, а в твоем коде, ты их пытался получить сразу же, минуя события. Для 0 можно добавить проверку, чтобы не показывать.

[Антон Вебсайтовский]

Одиночка Айс, спасибо, щас буду разбираться.

[Антон Вебсайтовский]

Проверил, ты не учел видимо про селект 1, там цена бралась, в моем примере, а у тебя в примере оно не работает, тупо 1 или 2 или 3 выводит.

$('#resultPrice').html($("#prices div").eq(+$selected.data("price") - 1).text());

[Антон Вебсайтовский]

И ты не учел, если селект 1 выбираешь, то цена в результате тож должна выводиться, я вроде старался описал, а меня откритиковали ) а по итогу итога нет.

[Одиночка Айс]

Антон Вебсайтовский, там в конце приписка по этому поводу и я показал только принцип, а не решение