jQuery在数据属性上返回RNan

Question

我正在使用jQuery构建一个简单的计算器。 我有两个选择字段，如下所示

 <label for="gold">
        <span>Choose Gold</span>
        <select name="ValOne" id="ValOne" class="DropChange">
            <option data-price="<?php echo $rs_type_rows['paladium']; ?>">Palladium</option>
            <option data-price="<?php echo $rs_type_rows['nineK']; ?>">9K (white gold)</option>
            <option data-price="<?php echo $rs_type_rows['fourteenkwhite']; ?>">14K (white gold)</option>
            <option data-price="<?php echo $rs_type_rows['fourteenkyellow']; ?>">14K (yellow gold)</option>
            <option data-price="<?php echo $rs_type_rows['eighteenkwhite']; ?>">18K (white gold)</option>
            <option data-price="<?php echo $rs_type_rows['eighteenkyellow']; ?>">18K (yellow gold)</option>
            <option data-price="<?php echo $rs_type_rows['twentytwokwhite']; ?>">22K (yellow gold)</option>
            <option data-price="<?php echo $rs_type_rows['platinum']; ?>">Platinum (950)</option>
        </select>
    </label>



    <label for="carats">
        <span>Choose Carats</span>
        <select name="ValTwo" id="ValTwo" class="DropChange">
            <option data-price="<?php echo $rs_size_rows['twenty']?>">0.20 Carats (~3.8mm)</option>
            <option data-price="<?php echo $rs_size_rows['thirty']?>">0.30 Carats (~4.2mm)</option>
            <option data-price="<?php echo $rs_size_rows['fourty']?>">0.40 Carats (~4.8mm)</option>
            <option data-price="<?php echo $rs_size_rows['fifty']?>">0.50 Carats (~5.2mm)</option>
            <option data-price="<?php echo $rs_size_rows['sixty']?>">0.60 Carats (~5.4mm)</option>
            <option data-price="<?php echo $rs_size_rows['seventy']?>">0.70 Carats (~5.7mm)</option>
        </select>
    </label>

我有这个jQuery将进行计算

$(document).ready(function() {
        $(".DropChange").change(function(){
            var ValOne = parseInt($('#ValOne').attr("data-price"), 10);
            var ValTwo = parseInt($('#ValTwo').attr("data-price"), 10);
            var ValThree = $('#ValThree').val();
            var totalTotal = ((ValOne * 1) * (ValTwo * 1));
            $('#Total').text('Price: R ' + totalTotal + ' Size: ' + ValThree);
            $('#quote_btn').show();



  });
});

我已仔细检查并确保来自php的值是数字，有些具有小数位，但它们都是数字。

当我运行此Jquery时，我得到RNaN的结果说那不是数字。

当我使用值而不是数据价格时，它可以工作，但是我需要稍后将要使用的某些PHP的value属性。 因此，我需要对其进行更改，但是当我这样做时，它就崩溃了。 有人知道为什么吗？ 或知道任何有关如何解决它的理论？

Answer 1

因为select元素不具有该属性，所以该选项具有。 选择所选的选项。

parseInt($('#ValOne option:selected').attr("data-price"), 10);