Javascript 将两个下拉列表值相乘，结果为NaN和一个值

我有一个简单的函数，它在两个下拉字段中监视“更改”，然后将两个值相乘以显示使用表单时实时更新的总和

使用引导选择器——没有默认选择，因此在下拉字段中进行选择之前没有值

当进行第一个下拉选择时，将检测到更改，并将值与非值相乘。从而产生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);
});

组大小
1.
2.
3.
价格
备选方案A：10美元
备选案文B：20美元
备选案文B：30美元
总额：
$（'.calculate'）.change（函数（）{
var group=parseInt（$（'.selectpicker.group'）.val（））；
var price=parseInt（$（'.selectpicker.price'）.val（））；
var总额=集团*价格；
$（'总计'）.val（'总计'）；
});

NaN错误：

---

这是因为当您更改组的第一个下拉列表时，第二个下拉列表的值会给出NaN值，这就是为什么您会得到NaN值。如果两个下拉列表都被选中，则应保留一个验证，然后将其相乘。

只需检查您的值是否被选中或它们是否为数字

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

---

将if/else语句与

isNaN（）一起使用。

：

---

只使用

if（）

语句可能很有诱惑力，但如果以后使用

则会导致意外结果。如果值不是数字，最好使用

else

清空输入。

这是一个选择列表。您需要以选择列表的形式访问选择列表

$('.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不选择所选类型来获取它的值。

试试以下方法：

$('.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);
    }
});

试试这个

$('.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;
    }
});

---

将javascript编写为

<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);
});

    $('.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);
   }    
});

尝试验证以下两个方面：

$('.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);
    }
});

---

if（！（isNaN（total））{$（'#total'）.val（'$'+total）}

woops忘记了这一点，感谢您在没有

else

的情况下提醒meNote，该值不会重置为null。例如，如果您稍后有

，而用户选择了它。@rybo111这是正确的，但在他的示例中，他没有空选项。不过，这是解决问题的基本示例。