Как сумировать все data атрибуты у select?

Question

[WebforSelf]

Набросал пример,
https://codepen.io/webforself/pen/MWYRMaW

у опций есть атрибут data-price="1 000 руб"

Как мне вывести их общую сумму? и чтоб она вернула мне сумму всех селектов с "руб" также как я отдаю в дата прайс.

Answer 1

[Алексей Ярков]

<form class="card__content variants" action="/cart">
    <h1  class="card__title">TEST</h1>
 
    <select class="select_product" name="variant1">
        <option value="198" data-price="8 000 руб" data-compare-price="0 руб">Фискальный накопитель на 15 мес</option>
        <option value="216" data-price="12 000 руб" data-compare-price="0 руб">Фискальный накопитель на 36 мес</option>
    </select>
 
    <select class="select_product" name="variant2">
        <option style="display: none;">Регистрация в ИФНС</option>
        <option value="214" data-price="1 000 руб" data-compare-price="0 руб">В  офисе</option>
        <option value="215" data-price="2 000 руб" data-compare-price="0 руб">У клиента</option>
    </select>
 
    <select class="select_product" name="variant3">
        <option style="display: none;">Договор с ОФД</option>
        <option value="217" data-price="2 000 руб" data-compare-price="0 руб">на 12 месяцев</option>
        <option value="218" data-price="2 400 руб" data-compare-price="0 руб">на 15 месяцев</option>
        <option value="219" data-price="4 500 руб" data-compare-price="0 руб">на 36 месяцев</option>
    </select>
 
    <select class="select_product" name="variant4">
        <option style="display: none;">ЭЦП (без носителя)</option>
        <option value="220" data-price="1 300 руб" data-compare-price="0 руб">Для кассы</option>
        <option value="221" data-price="2 000 руб" data-compare-price="0 руб">для маркировки</option>
        <option value="222" data-price="4 500 руб" data-compare-price="0 руб">для ЕГАИС</option>
    </select>
 
    <select class="select_product" name="variant5">
        <option style="display: none;">Договор на тех. обслуживание (1 год)</option>
        <option value="223" data-price="1 600 руб" data-compare-price="0 руб">Тариф "Эконом"</option>
        <option value="224" data-price="2 800 руб" data-compare-price="0 руб">Тариф "Стандарт"</option>
        <option value="225" data-price="4 700 руб" data-compare-price="0 руб">Тариф "Эксклюзив"</option>
    </select>
 
    <p class="card__price prc-new">8 000 руб</p>
</form>

let sum = 0;

function calculate () {
    sum = 0;
    $('select[name^=variant]').each(function(index) {
        const price = $(this).find('option:selected').attr('data-price');
        sum += price ? +price.replace(/[^\d]+/g, '') : 0;
    });
    
    $('form.variants').find('.prc-new').html(`${sum} руб`);
}
$('select[name^=variant]').on('change', function() {
    calculate();
    return false;
});

calculate();

Comments

[WebforSelf]

Блин...не допру(

[WebforSelf]

Блин пора jquery учить. хорошая штука

[WebforSelf]

Moon Presence, есть интересные задачки где порешать можно?