javascript - 使用jQuery根据选择的选项计算小计和总价

我是jquery的新手，可能我的脚本的代码编写不正确，但是我正在为College创建一个在线电影项目，并且不知道预订系统有什么问题。实际上，我有一张表格，其中包含票证类型，价格和数量，我想根据用户的选择更新小计和总价。
不幸的是，我在这里研究了其他答案以及一些教程，但是没有一个对我有用。
这是我的html表：

    <table id="myTable" class="table table-bordered">
      <thead>
        <tr>
          <th>Ticket</th>
          <th>Price</th>
          <th>Quantity</th>
          <th><span id="subtotal" class="subtotal">Subtotal</span></th>
        </tr>
      </thead>
      <tfoot>
        <tr>
          <td colspan="2"></td>
          <td id="total"><span>TOTAL</span></td>
        </tr>
      </tfoot>
      <tbody>
      <tr>
        <td>Adult</td>
        <td><span id="price" class="price">£8.25</span></td>
        <td>
          <select class="form-control" id="qty" name="qty">
             <option value="0">0</option>
             <option value="1">1</option>
             <option value="2">2</option>
             <option value="3">3</option>
             <option value="4">4</option>
             <option value="5">5</option>
             <option value="6">6</option>
             <option value="7">7</option>
             <option value="8">8</option>
             <option value="9">9</option>
          </select>
        </td>
        <td><span id="subtotal" class="subtotal">£0</span></td>
      </tr>
      <tr>
        <td>Junior</td>
        <td><span id="price" class="price">£6.75</span></td>
        <td>
          <select class="form-control" name="qty">
             <option value="0">0</option>
             <option value="1">1</option>
             <option value="2">2</option>
             <option value="3">3</option>
             <option value="4">4</option>
             <option value="5">5</option>
             <option value="6">6</option>
             <option value="7">7</option>
             <option value="8">8</option>
             <option value="9">9</option>
          </select>
        </td>
        <td><span id="subtotal" class="subtotal">£0</span></td>
      </tr>
      <tr>
        <td>Senior</td>
        <td><span id="price" class="price">£6.75</span></td>
        <td>
          <select class="form-control" name="qty">
             <option value="0">0</option>
             <option value="1">1</option>
             <option value="2">2</option>
             <option value="3">3</option>
             <option value="4">4</option>
             <option value="5">5</option>
             <option value="6">6</option>
             <option value="7">7</option>
             <option value="8">8</option>
             <option value="9">9</option>
          </select>
        </td>
        <td><span id="subtotal" class="subtotal">£0</span></td>
      </tr>
      <tr>
        <td>Student</td>
        <td><span id="price" class="price">£6.75</span> </td>
        <td>
          <select class="form-control" name="qty">
             <option value="0">0</option>
             <option value="1">1</option>
             <option value="2">2</option>
             <option value="3">3</option>
             <option value="4">4</option>
             <option value="5">5</option>
             <option value="6">6</option>
             <option value="7">7</option>
             <option value="8">8</option>
             <option value="9">9</option>
          </select>
        </td>
        <td><span id="subtotal" class="subtotal">£0</span></td>
      </tr>
      </tbody>
      </table>

这是我的js脚本：

$(document).ready(function () {
    update_amounts();
    $('.qty').change(function () {
        update_amounts();
    });
});

function update_amounts()
{
    var sum = 0.0;
    $('#myTable > tbody  > tr').each(function () {
        var qty = $(this).find('option:selected').val();
        var price = $(this).find('.price').val();
        var amount = (qty*price)
        sum+=amount;
        $(this).find('.subtotal').text(''+amount);
    });

    //just update the total to sum
    $('.total').text(sum);
}

如果有人可以帮助我，那就太好了。
真的非常感谢。

最佳答案

这是一个有效的小提琴：http://jsfiddle.net/ciscoheat/4hrx38nf/

$(document).ready(function () {
    update_amounts();
    // Fix: Invalid selector for the select fields
    $('select[name=qty]').change(update_amounts);
});

function update_amounts() {
    var sum = 0.0;
    $('#myTable > tbody  > tr').each(function () {
        var qty = $(this).find('option:selected').val();
        // Fix: price is in text, not in a form field
        // and it must be cleaned from the pound sign
        var price = $(this).find('.price').text().replace(/[^\d.]/, '');
        var amount = (qty * price);
        sum += amount;
        $(this).find('.subtotal').text('£' + amount);
    });

    //just update the total to sum
    $('.total').text('£' + sum);
}

我也在tfoot中做了HTML修复：

<tfoot>
    <tr>
        <td colspan="2"></td>
        <td><span>TOTAL</span></td>
        <!-- Fix: Moved the total field to the right place -->
        <td class="total"></td>
    </tr>
</tfoot>

因此，现在可以使用，但是仍然存在一些问题。 id属性必须唯一，price和subtotal有多个。我建议删除它们。