Суммировать значения нескольких selectboxes

Question

Я пытаюсь подвести некоторые значения из нескольких selectboxes. Проблема в том, что параметры содержат как текст, так и числа. Мне нужны только цифры и суммировать их. Другого способа это не сделать. Так что я попытался удалить текст из строки, а затем обновить сумму каждый раз, когда изменяется selectbox. Теперь результат всегда неправильный.

Другая проблема заключается в том, что иногда перед номером (-ами) появляется символ минуса. Есть ли способ извлечь это из общей суммы? Вот пример в третьем selectbox в 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 на все , и что в последних круглых скобках будет содержаться цена, если она имеет один:

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 в зависимости от вашего десятичного символа.

Answer 2

Если вы не хотите, чтобы положить эти цифры в значении, то вы можете использовать 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, вы можете извлечь data attribute с помощью jQuery.data():

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