1

Есть такая табличка, см картинку. таблица

Нужно подсчитать полученную сумму услуг в реальном времени, их порядка 50 на странице.
Т.е., например, выбрали диван 2х местный 2 шт и 3 посадочных места дивана, т.е. надо умножить цену услуги на её количество.

0

1 ответ 1

1

Такой вариант:

function recalculatePrices() {
  var total = 0;
  $('.service').each(function() {
    total += $(this).val() * $(this).attr('data-price');
  });
  $('#result').html(total);
}

$(document).ready(function() {
  $('.service').on('change', recalculatePrices);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select data-price="5" class="service">
  <option></option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>
<br />
<select data-price="3" class="service">
  <option></option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
</select>
<div id="result"></div>

Замечания:

  • все списки должны иметь класс service. Именно по этому классу потом будет определяться, включать их в расчет стоимости или нет
  • у каждого списка должен быть атрибут data-price. Именно эта цена будет использована при расчетах
  • с помощью метода jQuery bind каждому списку присваиваем событие onChange, и оно будет запускать функцию перерасчета recalculatePrices();

Надеюсь, Вам это подойдет.

2
  • @Regent, спасибо и за правку текста, и комментарии. Все с благодарностью принято. Ответы: Ваш №1 - это не убранный остаток от моих тестов :); №2 - исправлено; №3 - я так понимаю, это замечания к моим текстам, а не к коду?... Пытался попроще написать. По понятнее новичку; №4 - согласен - сделано. Еще раз спасибо!
    – cyadvert
    16 янв 2016 в 19:38
  • Надеюсь, привношу этим каплю пользу :) По третьему пункту: да, это про использование терминов "событие" и "обработчик события" в тексте. Я так и не осознал текст недавнего вопроса. Например, фразу "назначить 2 разных события change".
    – Regent
    16 янв 2016 в 19:49

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.