添加起始價格並添加價格

我有一個起始價格和選擇下拉選擇不同選項的div。我希望根據下拉選擇更改起始價格。添加起始價格並添加價格

<div id="price">$50.00</div> 

<select> 
    <option value="1">Option 1 (+$50.00)</option> 
    <option value="2">Option 2 (+$100.00)</option> 
    <option value="3">Option 3 (+$150.00)</option> 
    <option value="4">Option 4 (+$200.00)</option> 
</select>

我使用這個代碼，但它不工作

$('select').change(function() { 
    var total = 0; 

    $('select option:selected').each(function() { 
     var m = /\(\+ \$(\d+\.\d+)\)/.exec(this.value); 

     if(m !== null) { 
      total += +m[1]; 
     } 
    }); 

    var decimalPart = (total - Math.floor(total)) * 100; 

    $('#finalPrice').text('$' + Math.floor(total) + '.' + (decimalPart < 10 ? '0' : '') + decimalPart); 
});

不完全知道什麼在

來源

2013-10-23 awsm

爲什麼不能看到選項的'value'屬性是貨幣值？保存一個TON代碼。 – tymeJV

你想做什麼？ – Krishna

@tymeJV是的，或者甚至使用'data-money-value'，或者其他什麼。瘋狂地將價值從標籤中重新排列出來。 – McGarnagle

我會建議重新配置你的數據是呈現之外，並在你的元素屬性。

<div id="price" data-price="50.00">$50.00</div> 

<select> 
    <option value="1" data-price="50.00">Option 1 (+$50.00)</option> 
    <option value="3" data-price="100.00">Option 2 (+$100.00)</option> 
    <option value="4" data-price="150.00">Option (+$150.00)</option> 
    <option value="5" data-price="200.00">Option 4 (+$200.00)</option> 
</select> 


Total: <div id="finalPrice">$50.00</div>

併爲你的腳本：

$('select').change(function() { 
    var total = $("#price").data("price")*1; 

    $('select option:selected').each(function() { 
     total += $(this).data("price")*1; 
    }); 

    $('#finalPrice').text('$' + total.toFixed(2)); 
});

Requisite Fiddle

此外，它聽起來就像你對上市價格的頂部需要一個「最終價格」，所以我創建了一個額外的div保持這個價值。如果您想重複使用相同的「價格」，您可以簡單地將$('#finalPrice')選擇替換爲$('#price')，它將按需要運行。

來源

2013-10-23 19:26:45

jsFiddle Demo

打算只需保存的選項中的值value屬性。簡單得多！

<select> 
    <option value="50.00">Option 1 (+$50.00)</option> 
    <option value="100.00">Option 2 (+$100.00)</option> 
    <option value="150.00">Option (+$150.00)</option> 
    <option value="200.00">Option 4 (+$200.00)</option> 
</select>

和Javascript。我們只需獲取原始值，刪除$符號。並從下拉菜單中將其添加到this.value。

$('select').change(function() { 
    var originalPrice = parseFloat($('#price').text().replace('$', '')); 
    var total = parseFloat(this.value) + originalPrice; 

    $('#finalPrice').text('$' + total.toFixed(2)); 
});

來源

2013-10-23 19:20:15

<div id="price" data-value='50.00'>$50.00</div> 

<select> 
    <option value="1" data-value='50.00'>Option 1 (+$50.00)</option> 
    <option value="2" data-value='100.00'>Option 2 (+$100.00)</option> 
    <option value="3" data-value='150.00'>Option 3 (+$150.00)</option> 
    <option value="4" data-value='200.00'>Option 4 (+$200.00)</option> 
</select> 

<div id="finalPrice"></div>

的.js：

$('select').change(function() { 
    var total = parseFloat($('#price').data('value')); 

    $('select option:selected').each(function() { 
     var m = parseFloat($(this).data('value')); 

     if(m !== null) { 
      total += m; 
     } 
    }); 
    $('#finalPrice').data('value', total.toFixed(2)); 
    $('#finalPrice').text('$' + total.toFixed(2)); 
});

如果你使用非0的小數位數現在，可以理解這樣會稍微複雜一些。

編輯：這裏是工作提琴：http://jsfiddle.net/remus/ACnsp/

來源

2013-10-23 19:23:27 brandonscript

添加起始價格並添加價格

回答

相關問題