javascript - Calculating price from selected options in jquery -
my html code :
<select class="form-control b3 pricing" name="b3"> <option data-price="0" data-cheap="0">0</option> <option data-price="20" data-cheap="30">1</option> <option data-price="40" data-cheap="60">2</option> <option data-price="60" data-cheap="90">3</option> <option data-price="80" data-cheap="120">4</option> <option data-price="100" data-cheap="150">5</option> </select>
my jquery code :
$(document).ready(function () { var cheap=false; $('.day1').on('change', function (e) { var optionselected = $("option:selected", this); var valueselected = optionselected.val(); if(valueselected=="saturday") { cheap=true; alert(cheap); }else{ cheap=false; alert(cheap); } }); $('.pricing').change(function(){ var price = parsefloat($('.total').data('base-price')); $('.pricing').each(function(i, el) { if(cheap==false){ price += parsefloat($('option:selected', el).data('price')); }else{ price+= parsefloat($('option:selected').data('cheap')); } }); $('.total').val('$'+price.tofixed(2)); }); });
i want when day selected saturday data-cheap has taken , when other days selected data-price should calculated. help?
the problem see not passing context cheap query
$(document).ready(function () { var cheap = false; $('.day1').on('change', function (e) { cheap = $(this).val() == "saturday"; }); $('.pricing').change(function () { var price = parsefloat($('.total').data('base-price')) || 0; $('.pricing').each(function (i, el) { price += parsefloat($('option:selected', el).data(cheap ? 'cheap' : 'price')); console.log('x', price) $('.total').val('$' + price.tofixed(2)); }); }); });
demo: fiddle