将输入值与选择选项数据属性相乘

Question

我有以下代码没有按照我希望的方式工作，显然，我试图将选择选项数据属性与输入文本区域值相乘，但正在使用选择选项值。 我需要弄清楚为什么会这样。

这是我的代码；

     <input id="count" min="1" value="1" class ="txtMult form-control" type="number" name="txtEmmail" />
      <input type="text" value=""  class ="txtMult" name="txtEmmail"/>
      <span class="multTotal"></span>

    <select class="selectpicker">
    <option value="1" data-cubics='1'>multiply with 1</option>
    <option value="5" data-cubics='5'>multiply with 5</option>
    </select>

    <span id="grandTotal">250</span>

$(function(){
                $('.txtMult').change(function(){
                    var p=$(this).parent().parent()
                    var m=p.find('input.txtMult')
                    var mul=parseInt($(m[0]).val()*$(m[1]).val()).toFixed(2)
                    var res=p.find('.multTotal')
                    res.html(mul);
                    var total=0;
                    $('.multTotal').each(function(){
                        total+=parseInt($(this).html());
                    })
                    parseInt(total).toFixed(2);
                    $('#grandTotal').html(parseInt(total).toFixed(2));
                });
            })



$('.selectpicker').change(function() {
    calcVal();
});

function calcVal(){
    $(this).data('cubics')*$('.multTotal').html();
   $("#grandTotal").html($(this).data('cubics')*$('.multTotal').html())
}

// call on document load
calcVal();

Answer 1

• 不要使用.html()来获取值，而是使用.text() 。
• 您需要使用以下方法获取所选选项：

$("#grandTotal").html($(this).children(':checked')

 $(function() { $('.txtMult').change(function() { var p = $(this).parent().parent() var m = p.find('input.txtMult') var mul = parseInt($(m[0]).val() * $(m[1]).val()).toFixed(2) var res = p.find('.multTotal') res.html(mul); var total = 0; $('.multTotal').each(function() { total += parseInt($(this).text()); }) parseInt(total).toFixed(2); $('#grandTotal').html(parseInt(total).toFixed(2)); }); }) $('.selectpicker').change(calcVal); function calcVal() { $("#grandTotal").html($(this).children(':checked').data('cubics') * $('.multTotal').text().trim()) } // call on document load calcVal();

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div> <div> <input id="count" min="1" value="1" class="txtMult form-control" type="number" name="txtEmmail" /> <input type="text" value="" class="txtMult" name="txtEmmail" /> <span class="multTotal"></span> <select class="selectpicker"> <option value="1" data-cubics='1'>multiply with 1</option> <option value="5" data-cubics='5'>multiply with 5</option> </select> <span id="grandTotal">250</span> </div> </div>