Question

我试图从多个选择框中总结一些值。问题是选项包含文本和数字。我只需要数字并总结这些数字。没有其他办法可以做到这一点。所以我试图从字符串中删除文本，然后每次选择框更改时更新数量。现在结果总是错的。

我的另一个问题是，有时在数字前面有一个减号。有没有办法从总数中提取出来？在小提琴的第三个选择框中有一个例子。

有人可以帮忙吗？我创建了Fiddle here

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();
        });

Answer 1

如果您不想将这些数字放入值中，则可以使用HTML data attributes 所以你可以这样编码你的选择框：

<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');

Answer 2

假设您根本无法更改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”正则表达式。

总结多个选择框的值

2 个答案: