相乘兩個下拉值生成NaN與一個值

我有一個簡單的函數，監視在兩個下拉字段「變化」，然後乘以這兩個值來顯示的總和，其在使用實時更新形成。相乘兩個下拉值生成NaN與一個值
使用bootstrap selectpicker - 沒有默認選擇，因此在下拉字段中進行選擇之前沒有值。
當下拉選擇中的第一個選中時，檢測到更改並將該值與非值相乘。從而導致NaN輸出。

只有在選擇了兩個下拉字段後，如何才能輸出總數？

<label>Group Size</label> 
<select class="selectpicker group calculate" id="group" name="group" data-rule-required="true" title="Choose Group Size..."> 
<option value="1">1</option> 
<option value="2">2</option> 
<option value="3">3</option> 
</select> 

<label>Price</label> 
<select class="selectpicker price calculate" id="price" name="price" data-rule-required="true" title="Choose Price..."> 
<option value="10">Option A: $10</option> 
<option value="20">Option B: $20</option> 
<option value="30">Option B: $30</option> 
</select> 

<label>Total Sum:</label> 
<input name='total' id='total' disabled='true' data='' /> 

$('.calculate').change(function(){ 
    var group = parseInt($('.selectpicker.group').val()); 
    var price = parseInt($('.selectpicker.price').val()); 
    var total = group * price; 
    $('#total').val('$' + total); 
});

楠錯誤：

來源

2016-10-17 chiappa

'如果{$（ '#total'）。val（'$'+ total）};' –

woops忘了那個感謝remindi ng me –

使用if/else語句與isNaN()：

if(isNaN(total)){ 
    $('#total').val(''); 
} else{ 
    $('#total').val('$' + total); 
}

這可能是很有誘惑力的只需使用if()聲明，但如果以後使用3210，則會導致意外的結果。如果值不是數字，最好使用else清空輸入。

來源

2016-10-17 11:28:49 rybo111

它，因爲當你改變組的第一個下拉列表，然後第二個下拉的值給出NaN的價值，這就是爲什麼作爲結果你會得到NaN。你應該保持一個驗證，如果這兩個下拉選擇，然後你乘以它。

來源

2016-10-17 11:26:46

只是如果你的價值選擇或檢查，如果他們有一些

if(isNaN(total)==false) 
{ 
    $('#total').val('$' + total); 
}

DEMO

來源

2016-10-17 11:27:28 Alexis

注意，如果沒有'else'，則該值不會重置爲空。例如，如果您以後有''並且用戶選擇它。 – rybo111

@ rybo111這是真的，但在他的例子中，他沒有空的選項 – Alexis

儘管這是一個基本的例子來解決這個問題。 – rybo111

這是一個選擇列表。您需要將選擇列表作爲選擇列表進行訪問。

$('.calculate').change(function(){ 
    var selectgroup = $('.selectpicker.group').get(0); 
    var selectprice = $('.selectpicker.price').get(0); 

    var total = parseInt(selectgroup.options[selectgroup.selectedIndex].value) * parseInt(selectprice.options[selectprice.selectedIndex].value); 
    $('#total').val('$' + total); 
});

它完全擊敗了我爲什麼jQuery沒有拿起選擇類型來獲得它的價值。

來源

2016-10-17 11:32:36 Tschallacka

試試這個：

$('.calculate').change(function(){ 
    var groupstr = $('.selectpicker.group').val(); 
    var pricestr = $('.selectpicker.price').val(); 
    if (!isNaN(groupstr) && !isNaN(pricestr)) { 
     var group = parseInt(groupstr); 
     var price = parseInt(pricestr); 
     var total = group * price; 
     $('#total').val('$' + total); 
    } 
});

來源

2016-10-17 11:33:11

試試這個。

$('.calculate').change(function() { 
    if (Number($('.selectpicker.group').val()) && Number($('.selectpicker.price').val())) { 
     var total = Number($('.selectpicker.group').val()) * Number($('.selectpicker.price').val()); 
     $('#total').val('$' + total); 
    } else { 
     return; 
    } 
});

Fiddle Here.

來源

2016-10-17 11:33:24

寫你的JavaScript作爲

$('.calculate').change(function(){ 
    var group = parseInt($('.selectpicker.group').val()); 
    var price = parseInt($('.selectpicker.price').val()); 
    var total = group * price; 
    //Check if total is not a number 
    if(!isNaN(total)) { 
    $('#total').val('$' + total); 
    }  
});

來源

2016-10-17 11:34:50

嘗試驗證兩種：（！（isNaN（總）））

$('.calculate').change(function(){ 
    var group = parseInt($('.selectpicker.group').val()); 
    var price = parseInt($('.selectpicker.price').val()); 
    if(group && price) { 
     var total = group * price; 
     $('#total').val('$' + total); 
    } 
});

來源

2016-10-17 12:08:53 Suraj

相乘兩個下拉值生成NaN與一個值

回答

相關問題