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

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

示例＃2

不工作

示例＃3

如果我选择一个选项（例如：$ 4.00），则从$ 45.00开始，如果我选择没有价值的选项，结果将保持在$ 49.00，当它应该回到$ 45.00时，结果为$ 49.00。

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

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

具有初始值的所选选项的总和值

3 个答案: