jQuery：每次选择新选项时从多个选择菜单中获取值

Question

我正在使用 jQuery 使用一系列选择菜单构建实时报价表单。我提出了下面的代码，它从每个选择菜单中获取默认值并将它们添加在一起：

$(document).ready(function(){
 $('select > option:selected').each(function() {
  var value = $(this).attr('label');

  total = parseFloat(total) + parseFloat(value);
  total = total.toFixed(2);
 });
 printTotal(total); // prints the total price
});

唯一的问题是这仅在页面加载时有效。我希望每次在任何选择菜单（有 6 个）中选择新值时都会更新价格。

我尝试添加 $("选择").change(function () { ...} 用触发器（如图所示 示例代码在这里），但这会将每个选择菜单的所有值相加（即总数是应有值的 6 倍）。

我搜索了文档，但无法确定要使用哪个事件。有人可以帮忙吗？

HTML 示例（如果有帮助）：

<select id="colors">
 <option label="25.00" value="XYZ">1 color</option>
 <option label="50.50" value="ABC">2 colors</option>
 <option label="75.75" value="MNO">3 colors</option>
</select>

Answer 1

马特，我认为你触发了我脑海中的某些东西，因为我想通了——至少，到目前为止它是有效的。

这是执行此操作的代码：

$(document).ready(function(){
    $('select').change(function() {
        var total = 0;
        $('select > option:selected').each(function() {
            var value = $(this).attr('label');

            total = parseFloat(total) + parseFloat(value);
            total = total.toFixed(2);
        });
        printTotal(total);
    });
});

这归结为放置 总变量 = 0 件，每次做出新选择时都必须重置。

Answer 2

测试时在 change 致电，您需要确保您进行搜索 options 在上下文中 select 您单击的元素。

$('select').change(function() {
    var total = 0;

    // note the second parameter passed to the $() function below
    $('option:selected', $(this)).each(function() {
        var value = $(this).attr('label');
        total += parseFloat(value).toFixed(2);
    });
    printTotal(total);
});