如果满足特定条件，如何添加到下拉总数？

Question

我有一系列下拉菜单。下拉列表中的每个项目都有不同的值，并且所有项目的值在它们被选中时被总计。

这是我所拥有的： https://jsfiddle.net/Leacwo9q/

  $('.select-gear').on('change', function(){
    var price = 0;
    var calories = 0;
    

    $('.select-gear :selected').each(function() {
        price += Number($(this).data('price'));
        calories += Number($(this).data('calories'));
    });

    $('#price').html(price);
    $('#calories').html(calories);
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="pick">
Select an Item: <select class="select-gear" name="anch1" id="item-1">
    <option value="0" data-calories="0" data-price="0" />-- No Item Selected --
<optgroup label="Breakfast">
      <option value="1" data-calories="100" data-price="3" />Eggs
      <option value="2" data-calories="250" data-price="2" />Sausage
      <option value="3" data-calories="300" data-price="2" />Orange Juice
</optgroup>
</select> <span class="update">Your stats automatically update in the calculator.</span>
</div>

<div class="pick">
Select an Item: <select class="select-gear" name="anch2" id="item-2">
    <option value="0" data-calories="0" data-price="0" />-- No Item Selected --
<optgroup label="Lunch">
      <option value="1" data-calories="100" data-price="4" />Hamburger
      <option value="2" data-calories="250" data-price="2" />French Fries
      <option value="3" data-calories="300" data-price="2" />Milk
</optgroup>
</select> <span class="update">Your stats automatically update in the calculator.</span>
</div>

<div class="pick">
Select an Item: <select class="select-gear" name="anch3" id="item-3">
    <option value="0" data-calories="0" data-price="0" />-- No Item Selected --
<optgroup label="Dinner">
      <option value="1" data-calories="100" data-price="4" />Pizza
      <option value="2" data-calories="250" data-price="3" />Yogurt
      <option value="3" data-calories="300" data-price="2" />Soda
</optgroup>
</select> <span class="update">Your stats automatically update in the calculator.</span>
</div>

Price: $<span id="price">0</span> | 
Calories: <span id="calories">0</span>

在这个例子中，我希望能够以某种方式标记乳制品——“eggs”、“milk”和“yogurt”，并根据选择的数量添加到总数中，即如果两个或多个乳制品是选中，在总价上加 1 美元。如果选择了三个或更多乳制品，则添加 2 美元。重要的是它是项目的数量或更大。例如，如果有人选择了“鸡蛋”、“汉堡包”和“酸奶”，这三个项目的总和显示为 11 美元 - 10 美元，我指定如果选择了两个或更多乳制品，则增加 1 美元。

我怎样才能“标记”这些项目并实现这一点？

Answer 1

这是你想要的吗？

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="pick">
Select an Item:
<select class="select-gear" name="anch1" id="item-1">
    <option value="0" data-calories="0" data-price="0">-- No Item Selected -- </option>
    <optgroup label="Breakfast">
        <option value="1" data-calories="100" data-price="3" data-category = "dairy">Eggs</option>
        <option value="2" data-calories="250" data-price="2">Sausage</option>
        <option value="3" data-calories="300" data-price="2">Orange Juice</option>
    </optgroup>
</select>
<span class="update">Your stats automatically update in the calculator.</span>
</div>

<div class="pick">
Select an Item:
<select class="select-gear" name="anch2" id="item-2">
    <option value="0" data-calories="0" data-price="0">-- No Item Selected --</option>
    <optgroup label="Lunch">
        <option value="1" data-calories="100" data-price="4">Hamburger</option>
        <option value="2" data-calories="250" data-price="2">French Fries</option>
        <option value="3" data-calories="300" data-price="2" data-category = "dairy">Milk</option>
    </optgroup>
</select>
<span class="update">Your stats automatically update in the calculator.</span>
</div>

<div class="pick">
Select an Item:
<select class="select-gear" name="anch3" id="item-3">
    <option value="0" data-calories="0" data-price="0">-- No Item Selected --</option>
    <optgroup label="Dinner">
        <option value="1" data-calories="100" data-price="4">Pizza</option>
        <option value="2" data-calories="250" data-price="3" data-category = "dairy">Yogurt</option>
        <option value="3" data-calories="300" data-price="2">Soda</option>
    </optgroup>
</select>
<span class="update">Your stats automatically update in the calculator.</span>
</div>

Price: $ <span id="price">0</span>
Calories: <span id="calories">0</span>

<script>
$('.select-gear').on('change', function(){
    var price = 0;
    var calories = 0;
    

    $('.select-gear :selected').each(function() {
        price += Number($(this).data('price'));
        calories += Number($(this).data('calories'));
    });
    var dairy_no = document.querySelectorAll('option:checked[data-category="dairy"').length;
    if (dairy_no == 2)
        price += 1;
    else if (dairy_no >= 3)
        price += 2;
    $('#price').html(price);
    $('#calories').html(calories);
    });
</script>