berechnen Gesamtsumme von mehreren Optionen ausgewählt + mit Basiswert

Question

Dies ist im Grunde für ein Produkt in dem Produkt mehrere hat „add ons“ wie: Farbe Größe & etc

Also diese "add ons "sind im ausgewählten Formularfeld. mag:

color 
<select class="cost"> 
<option value="0">Blue</option> 
<option value="10">Red</option> 
<option value="20">Pink</option> 
</select> 

size 
<select class="cost"> 
<option value="0">small</option> 
<option value="10">large</option> 
<option value="20">x-large</option> 
</select> 

ich insgesamt angezeigt werden soll aller ons mit Produktbasispreis ausgewählt hinzufügen.

kann also hier Produktpreis sagt in verstecktem Feld ist wie:

<input name="ProductPrice" value="100"/> 

Also, wenn ich Farbe als rot & Größe x-large so insgesamt 100 wird + 10 + 20 ausgewählt = 130

ich will nur „130“

Answer 1

Sie map() und get() verwenden können, um anzuzeigen Summe zurückzukehren Array von select Werte und reduce() zurückzukehren und fügen Sie diesen Wert auf Basispreis. Diese Lösung verwendet jQuery.

var base = $('input[name="ProductPrice"]').val(); 
 
$("select").change(function() { 
 
    var addons = $('.cost').map(function() { 
 
    return $(this).val() 
 
    }).get().reduce(function(r, e) { 
 
    return r + +e 
 
    }, 0); 
 

 
    $('input[name="ProductPrice"]').val(+base + addons) 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
color 
 
<select class="cost"> 
 
    <option value="0">Blue</option> 
 
    <option value="10">Red</option> 
 
    <option value="20">Pink</option> 
 
</select> 
 
size 
 
<select class="cost"> 
 
    <option value="0">small</option> 
 
    <option value="10">large</option> 
 
    <option value="20">x-large</option> 
 
</select> 
 

 
<input name="ProductPrice" value="100" />

Diese reine Javascript-Lösung ist Array.from() und reduce() verwenden.

var base = document.querySelector('input[name="ProductPrice"]').value 
 
var select = Array.from(document.querySelectorAll('select.cost')); 
 

 
select.forEach(function(e) { 
 
    e.addEventListener('change', function() { 
 
    var sum = select.reduce(function(r, a) { 
 
     return r + +a.options[a.selectedIndex].value; 
 
    }, 0); 
 

 
    document.querySelector('input[name="ProductPrice"]').value = +base + sum; 
 
    }) 
 
})

color 
 
<select class="cost"> 
 
    <option value="0">Blue</option> 
 
    <option value="10">Red</option> 
 
    <option value="20">Pink</option> 
 
</select> 
 
size 
 
<select class="cost"> 
 
    <option value="0">small</option> 
 
    <option value="10">large</option> 
 
    <option value="20">x-large</option> 
 
</select> 
 

 
<input name="ProductPrice" value="100" />