Есть такая табличка, см картинку.
Нужно подсчитать полученную сумму услуг в реальном времени, их порядка 50 на странице.
Т.е., например, выбрали диван 2х местный 2 шт и 3 посадочных места дивана, т.е. надо умножить цену услуги на её количество.
Stack Overflow на русском — это сайт вопросов и ответов для программистов. Присоединяйтесь! Регистрация займёт не больше минуты.
Присоединиться к сообществуТакой вариант:
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
. Именно эта цена будет использована при расчетахbind
каждому списку присваиваем событие onChange
, и оно будет запускать функцию перерасчета recalculatePrices();
Надеюсь, Вам это подойдет.
change
".