将多个选择框的值相加

Sum up values of multiple selectboxes

本文关键字：选择      更新时间：2023-09-26

我正在尝试从多个选择框中总结一些值。问题是这些选项同时包含文本和数字。我只需要这些数字，然后把它们加起来。没有其他方法可以做到这一点。因此，我尝试从字符串中提取文本，然后在每次选择框更改时更新金额。现在的结果总是错误的。

我的另一个问题是，有时数字前面会有一个减号。有什么方法可以从总数中提取出来吗？Fiddle中的第三个选择框中有一个示例。

有人能帮忙吗？我在这里创建了一个Fiddle

HTML

<form method="post" id="product_configure_form" action="cart/add/14161745">
    <div class="product-info-options tui">
        <input type="hidden" value="" id="product_configure_bundle_id" name="bundle_id">
        <div class="product-configure">
            <div class="product-configure-custom">
                <div class="product-configure-custom-option">
                    <label for="product_configure_custom_604623">Stoffering: <em>*</em>
                    </label>
                    <select id="product_configure_custom_604623" name="custom[604623]">
                        <option selected="selected" disabled="disabled" value="">Maak een keuze...</option>
                        <option value="5217777">Camira 24/7 *snellever - 2 weken</option>
                        <option value="5217779">Staccato *snellever - 2 weken (+€27,00)</option>
                        <option value="5217781">Leer 1 Trento *snellever - 2 weken (+€85,00)</option>
                        <option value="5217783">Leer 2 Litano (+€172,00)</option>
                    </select>
                    <div class="product-configure-clear"></div>
                </div>
                <div class="product-configure-custom-option">
                    <label for="product_configure_custom_603895">Armlegger frame kleur: <em>*</em>
                    </label>
                    <select id="product_configure_custom_603895" name="custom[603895]">
                        <option selected="selected" disabled="disabled" value="">Maak een keuze...</option>
                        <option value="5217785">zwart gecoat</option>
                        <option value="5217787">aluminium gecoat (+€11,00)</option>
                        <option value="5217789">aluminium gepolijst (+€11,00)</option>
                        <option value="5217791">verchroomd (+€53,00)</option>
                    </select>
                    <div class="product-configure-clear"></div>
                </div>
etc............

JQUERY

        function update_amounts() {
          var sum = 0.0;
          $('#product_configure_form .product-configure-custom-option select').each(function () {
            var price = $(this).find('option:selected').text();
            var priceClean = price.replace(/[^0-9]/g, '');
            priceClean = parseFloat(priceClean) || 0;
            sum += priceClean;
          });
          $('#amount').text('€' + sum.toFixed(2));
        }

        $( "#product_configure_form .product-configure-custom-option select" ).change(function() {
          update_amounts();
        });

如果您不想将这些数字放在值中，那么您可以使用HTML数据属性
所以你可以这样编码你的选择框：

<select id="mySelectBox">
    <!--selected as an example-->
    <option value="123" data-price="27000" selected>Some Stuff ($27,000)</option>
    <option value="124" data-price="12000">Magic Sword ($12,000)</option>
</select>

然后使用jQuery，可以使用jQuery.data（）：提取data attribute

//27,000
var price = $('select#mySelectBox').find(':selected').data('price');

假设您根本无法更改HTML结构，并且最后一个括号将包含价格（如果有）：

function update_amounts() {
    var sum = 0.0;
    $('#product_configure_form .product-configure-custom-option select').each(function () {
        var optionText = $(this).find('option:selected').text();
        var matches = optionText.match(/'(([^)]+)')/g) || [];
        if (matches.length > 0) {
            var priceText = matches[matches.length - 1];
            if (priceText.indexOf("€") > -1) {
                var priceClean = priceText.replace(/[^0-9'+'-'.',]/g, '');
                var priceValue = parseFloat(priceClean) || 0;
                sum += priceValue;
            }
        }
    });
    $('#amount').text('€' + sum.toFixed(2));
}
$( "#product_configure_form").on("change", ".product-configure-custom-option select", update_amounts);

您可能需要根据小数点字符调整"priceClean"正则表达式。

相关文章：