Question

我有一个简单的功能，可以监控＆＃39; 更改＆＃39;在两个下拉字段中，然后将两个值相乘以显示使用表单时实时更新的总和。
使用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);
});

NaN错误：

Answer 1

对if(isNaN(total)){ $('#total').val(''); } else{ $('#total').val('$' + total); }使用if / else语句：

if()

使用<option></option>语句可能很诱人，但如果您以后使用else，则会导致意外结果。如果值不是数字，最好使用Counter清空输入。

Answer 2

只需检查您的值是否已选中或是否为数字

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

DEMO

Answer 3

试试这个：

for (var j = 0; j < 3; j++) {

                StretchData.getById(item)
                .then(function (data) {
                    alert(startWorkOutModel.sortValue);
                    startWorkOutModel.inStretchedData = {
                        sort: startWorkOutModel.sortValue,
                        sData: data.result
                    }
                    startWorkOutModel.stretchedData.push(startWorkOutModel.inStretchedData);
                    fl = true;
                    console.log(JSON.stringify(startWorkOutModel.stretchedData));
                    // break;

                },
                function (error) {
                    alert(JSON.stringify(error));
                });                            

      }

Answer 4

将您的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);
   }    
});

Answer 5

这是因为当您更改组的第一个下拉列表时，第二个下拉列表的值会给出NaN值，这就是您获得NaN的原因。如果两个下拉列表都被选中，那么你应该保持验证，然后再乘以它。

Answer 6

这是一个选择列表。您需要将选择列表作为选择列表进行访问。

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

Answer 7

试试这个。

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

Answer 8

尝试验证两者：

<p id="test"></p>
<script>
var text="Hi I am Anonymous";
if text.IndexOf("Hi") {
document.getElementById("test").innerHTML = "Hey Anonymous";
return;
}//Sorry for the bad intending
</script>

将两个下拉值相乘会导致NaN具有一个值

8 个答案: