Javascript 如何在不刷新页面的情况下通过乘以数量来更新成本

我的html代码中有一个带有选项的select元素。有三种不同的量（选项）：1、2、3

每次单击某个选项时，我都希望更新小计成本，而不刷新页面

我正在使用id='total'选择总金额

这是我的HTML代码：

<td>
    <select>
        <option class="option" value="1">1</option>
        <option class="option" value="2">2</option>
        <option class="option" value="3">3</option>
    </select>
</td>

<td>
    <p id='total'>699</p>
</td>

$(document).ready(function(){
    $('.option').click(function(){
        var total =699;

        $('.option:select').each(function(){
            total*= parseInt($(this).val()); 
        });

        $('#total').html('$'+total);
    });
});

---

您的问题是因为没有

：在jQuery中选择
选择器，并且不需要
each（）
。您还应该将事件处理程序挂接到
select
元素的
change
事件，而不是
选项的
单击

您还试图更新每个事件的
total
值，这意味着后续计算是不正确的，因为它们是基于以前的结果，而不是原始al
699
值。试试这个：


$（函数（）{
变量$total=$（“#total”）；
var originalTotal=$total.data（'total'）；
$（'select'）.change（函数（）{
$total.html（'$'+（originalTotal*$（this.val（））；
});
});

1.
2.
3.
$699
试试这个



1.
2.
3.
699
$（函数（）{
$（'select'）。在（“更改”，函数（）上）{
风险价值总额=699；
$（'select'）。每个（函数（）{
total*=parseInt（$（this.val（））；
});
$（'#total'）.html（'$'+total）；
});
});
我为你准备了这把小提琴：


您的js代码不正确（我还向HTMLSelect元素添加了一个类）

问候语
一旦触发，页面就会刷新，没有问题。如果答案有帮助，不要忘记接受。如果你对我的答案感到满意，你可以将我的问题标记为已解决，也可以将我的问题标记为已解决；）
$(document).ready(function(){
    $('.mySelect').change(function(){
        var total =699;
        $('#total').html(total*$(this).val())
    });
});