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

Question

我的 html 代码中有一个带有选项的选择元素。共有三个不同的数量(选项):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>

这是我的 Javascript/jQuery 代码:

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

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

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

Answer 1

我为你准备了这个 fiddle :

https://jsfiddle.net/hd61mvc4/

您的 js 代码不正确(我还向 HTML select 元素添加了一个类)。

$(document).ready(function(){
    $('.mySelect').change(function(){
        var total =699;
        $('#total').html(total*$(this).val())
    });
});

问候