Javascript 所选选项的值与初始值之和

我正在使用此脚本执行我需要的操作：

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>

我面临的问题是，我希望初始值来自标签：

示例#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

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

从$0.00开始，如果我选择一个选项（例如：$4.00），结果是$4.00，如果我选择没有值的选项，结果返回到$0.00

示例#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);
}); 

从$45.00开始，如果我选择了一个选项（例如：$4.00），结果是$49.00，如果我选择了没有值的选项，结果保持在$49.00，当它应该返回到$45.00

---

如果选择的选项为空，如何使示例#3返回初始价格？

您可以使用html5属性：

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

<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>

---

在这里您可以找到一些

您可以使用html5属性：

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

<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>

---

在这里您可以找到一些

您可以将初始值存储在数据属性中：

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

<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>

---

可以将初始值存储在数据属性中：

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

<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>

试试这个

 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;
});

试试这个

 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;
});

---

在这种情况下，这将起作用。但是，如果有（假设）两个下拉列表，这将不再起作用，但是我喜欢全局scopte变量，我首先考虑的是相同的，在这种情况下这将起作用。但是，如果有（比如）两个下拉列表，这将不再有效，但是我喜欢全局scopte变量，我一开始也在考虑同样的问题