значения сумма выбранных опций с начальным значением

Question

им, используя этот скрипт, чтобы делать то, что мне нужно:

HTML

<label id="starting_price">45.00</label> 
<select name="price" > 
<option value="">Options</option> 
<option value="4.00">Small</option> 
<option value="8.00">Medium</option> 
</select> 

Пример # 1

$('select').change(function(){ 
    var sum = 0; 
    $('select :selected').each(function() { 
     sum += Number($(this).val()); 
    }); 
    $("#starting_price").html(sum); 
}); 

Проблема им что я хочу, чтобы начальное значение было от метки:

Пример # 2

$('select').change(function(){ 
    var initial = $('#starting_price').html(); 
    var sum = initial; 
    $('select :selected').each(function() { 
     sum += Number($(this).val()); 
    }); 
    $("#starting_price").html(sum); 
}); 

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

Пример # 3

$('select').change(function(){ 
    var initial = +($('#starting_price').html()); 
    var sum = initial; 
    $('select :selected').each(function() { 
     sum += Number($(this).val()); 
    }); 
    $("#starting_price").html(sum); 
}); 

это результаты:

ПРИМЕР № 1

Начиная с $ 0.00, если я выбираю параметр (пример: $ 4.00), результат равен $ 4.00, если я выберу параметр без значения, результат вернется к $ 0.00.

Пример # 2

НЕ РАБОТА

Пример # 3

начинается от $ 45.00, если я выбрать вариант (пример: $ 4.00) результат $ 49,00, если я выбрать опцию без ценности результат остается в $ 49,00, когда он должен вернуться к $ 45,00.

Как я могу сделать ПРИМЕР №3 вернуться к начальной цене, если выбрана опция NULL?

Answer 1

Вы можете использовать атрибут html5:

<label id="starting_price" data-startprice="45.00">45.00</label> 

Вы можете получить доступ к этому с одним из них:
$('#starting_price')[0].dataset.startprice (это родной JS, мой предпочтительный) или $('#starting_price').attr('data-startprice') или $('#starting_price').data('startprice')

, потому что это не меняется, вы всегда можете вернуться к нему

$('select').change(function(){ 
    var sum = Number($('#starting_price')[0].dataset.startprice);// get the data-attribute 
    $('select :selected').each(function() { 
     sum += Number($(this).val()); 
    }); 
    $("#starting_price").html(sum); 
}); 

Здесь вы можете найти некоторые documentation on data attribute with javascript

Answer 2

Вы можете сохранить начальное значение в атрибуте данных:

<label id="starting_price" data-initialvalue="45.00">45.00</label> 
<select name="price"> 
    <option value="">Options</option> 
    <option value="4.00">Small</option> 
    <option value="8.00">Medium</option> 
</select> 

Тогда доступ к этому:

$('select').change(function() { 
    var initial = +($('#starting_price').data("initialvalue")); 
    var sum = initial; 
    $('select :selected').each(function() { 
     sum += Number($(this).val()); 
    }); 
    $("#starting_price").text(sum); 
}); 

Answer 3

Попробуйте это.

var initial = +($('#starting_price').html()); 
$('select').change(function(){ 
    //var initial = +($('#starting_price').html()); 
    var sum = initial; 
    $('select :selected').each(function() { 
     sum += Number($(this).val()); 
    }); 
    $("#starting_price").html(sum); 
     sum=initial; 
}); 

jsFiddle