javascript - 汇总多个选择框的值

Question

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

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

有人可以帮忙吗？我创建了一个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() 提取数据属性 :

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