Question

我有一个基本form，用户选择option并输入数量。到input然后一个基本的jquery脚本将这些数字相乘得到一个总数。但唯一的问题是它没有实时更新。你必须亲眼看到它：http://jsfiddle.net/iamjosan/4T9Wq/

$('.setPrice').on('change', function () {

    var s = +$(this).find('option:selected').data('price');
    var q = +$('#quantity').val();

    if (q > 1) {
        var price = s * q;
    } else {
        price = s;
    }

    $('#showPrice').val(price.toFixed(2));
});

如何让脚本实时更新值？

修改

选择input后更改option值（大于1）会产生NaN，但在选择input之前更改option值会显示实际值。

Answer 1

使用input或keyup，因为change并非实时触发，具体取决于浏览器：

只要用户修改了控件的数据，就会触发input事件。提交值时会触发change事件，如果控件有意义则触发，或者当控件失去焦点时。在所有情况下，input事件都发生在相应的change事件（如果有）之前。（source）

另外，在您的具体情况下，您需要从正确的元素中检查商品的价格：

var s = +$("#size").find('option:selected').data('price');

不要忘记将id属性添加到正确的<select>。否则，您在当前元素上下文中查找选定的选项，可能是<input>。

总体而言（fiddle）：

$('.setPrice').on('keyup change', function () {     
    var s = +$("#size").find('option:selected').data('price');
    var q = +$('#quantity').val();
    var price = q > 1 ? s * q : s;
    $('#showPrice').val(price.toFixed(2));
});

请注意，我添加了change，因为您通常不会将键盘用于<select>（但您可以这样做，这就是为什么添加{{{ 1}}到那个元素）。

Answer 2

将您的javascript更新为：

function calculate(){
        var s = $('select.setPrice').find('option:selected').data('price');
    var q = $('#quantity').val();

    if(q > 1){
    var price = s * q;
    }
    else{
    price = s;
    }
  $('#showPrice').val(price.toFixed(2));
}   

$('select.setPrice').on('change', function () { 
calculate();  
});
$('input[name="os3"]').on('keyup',function(){
calculate();
});

http://jsfiddle.net/moussawi7/4T9Wq/4/

Answer 3

检查一下： http://jsfiddle.net/techsin/4T9Wq/5/

var p = $('.showPrice'), q= $('.quantity'), s= $('.size');

$('.setPrice').on('change', function () {
    var num = q.val(), price= s.find(':selected').data('price');
    if ((!isNaN(num))&&price) p.val(num * price);      
});

简单快捷。

为什么不输入val（）实时变化？

3 个答案: