Question

我的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>

这是我的Javascript / jQuery代码：

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

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

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

Answer 1

我为你准备了这个小提琴：

https://jsfiddle.net/hd61mvc4/

你的js代码不正确（我还在HTML select元素中添加了一个类）。

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

问候

Answer 2

您的问题是因为jQuery中没有:select选择器，并且不需要each()。您还应该将事件处理程序挂钩到change元素的select事件，而不是click的{{1}}。

您还尝试更新每个事件的option值，这意味着后续计算不正确，因为它们处理的是上一个结果，而不是原始的total值。试试这个：

＆＃13;

$(function() {
  var $total = $('#total');
  var originalTotal = $total.data('total');
    
  $('select').change(function() {
    $total.html('$' + (originalTotal * $(this).val()));
  });
});

＆＃13;

请注意，我修改了逻辑以从HTML中的<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <tr> <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" data-total="699">$699</p> </td> </tr> </table>属性读取起始值（即。699），而不是JS代码中的幻数。这使逻辑更易于维护，也更易于扩展。

Answer 3

试试这个

＆＃13;

1 101 111 . BCX 123;P1@QQQ
1 298 306 . CCC 234
1 299 305 . DDD 345;P2@WWW

＆＃13;

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

3 个答案: