相乘两个下拉值生成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与一个值

回答

相关问题