0

我使用这个脚本来做我需要的事情：

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 美元。

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

4

3 回答 3

1

尝试这个。

 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

于 2013-08-27T17:13:49.740 回答
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);
});

在这里你可以找到一些关于 javascript 数据属性的文档

于 2013-08-27T17:03:11.927 回答
1

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

<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);
});
于 2013-08-27T17:05:06.613 回答