How to add to dropdown total if specific conditions are met?

Question

I have a series of dropdowns. Each item in the dropdown has various values and the values of all items are totaled as they're selected.

Here's what I have: 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>

In this example, I want to be able to tag the dairy items - "eggs" and "milk" and "yogurt" somehow, and add to the total based on the number selected, ie if two or more dairy items are selected, add $1 to the total price. If three or more dairy items are selected, add $2. It is important that it's the number OR GREATER of items. So for example, if someone selected "eggs," "hamburger," and "yogurt," the total shows as $11 - $10 for the three items and I specified to add $1 if two or more dairy items are selected.

How can I "tag" these items and achieve this?

Answer 1

Is this what you want?

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