Wie werden alle Daten von ausgewählten Elementen in einem Feld zusammengefasst, wenn darauf geklickt wird?

Question

Ich möchte eine Div-Box, um die Preise aller ausgewählten Artikel separat anzuzeigen und die Summe der Preise der Artikel, die ausgewählt sind.

Ich habe dies die Schachtel mit den ausgewählten Produkten und die Summe der Preise anzuzeigen:

<select class="websiteProductList" name"product1"> 
    <option data-price="29.99" data-name="Product 1" value="1">Product 1</option> 
    <option data-price="39.00" data-name="Product 1 with special" value="0">Product1 with special</option> 
</select> 

<input class="websiteProductList" type="radio" name="product2" data-name="Product 2" data-price="49.99"> 
<input class="websiteProductList" type="radio" name="product3" data-name="Product 3" data-price="59.99"> 

: mit dem Produktnamen und Preis in einem Auswahl- und Eingabefeldern

<div id="selectedProductList"> 
    <ul> 
     <li>selected product…</li> 
     <li>selected product…</li> 
    </ul> 
</div> 
<div id="priceTotal">xyz $</div> 

und die Daten

Ich habe diesen Code:

$('.websiteProductList').change(function() { 
    $(this).find('option:selected').each(function() { 
     if ($(this).attr('data-price')) {    
      price = $(this).data('price'); 
      productName = $(this).data('name'); 
      sum += price; 
      $('#selectedProductList > ul').append('<li>' + productName + '</li>'); 
     } 
    }); 
    $('#priceTotal').text(sum); 
}); 

Aber es funktioniert nicht. Mein Wissen ist leider auch sehr eingeschränkt mit JavaScript. Da man es sofort sehen kann, ist der Code wahrscheinlich so schlecht, dass er sowieso nie arbeiten würde. Leider kann ich nicht weiter gehen. Irgendwelche Ideen?

Answer 1

Versuchen Sie mit diesem Code funktioniert es gut für mich.

<div id="selectedProductList"> 
<ul> 

</ul> 
</div> 
<div id="priceTotal">xyz $</div> 
<select class="websiteProductList" name"product1"> 
<option data-price="29.99" data-name="Product 1" value="1">Product 1</option> 
<option data-price="39.00" data-name="Product 1 with special" value="0">Product1 with special</option> 
</select> 
<input class="websiteProductList" type="radio" name="product2" data-name="Product 2" data-price="49.99"> 
<input class="websiteProductList" type="radio" name="product3" data-name="Product 3" data-price="59.99"> 

SCRIPT

var sum=0; 
$('.websiteProductList').change(function() { 

var Preis = 0; var product = '';

$ (this) .each (function() {var parentlocal = $ (this);.?

if(parentlocal.find("option:selected").length>0){ 
    price=parentlocal.find("option:selected").data('price'); 
    productName=parentlocal.find("option:selected").data('name'); 
    parentlocal.find("option:selected").attr('disabled', true); 
    sum = parseFloat(sum+price); 
    $('#selectedProductList > ul').append('<li>' + productName + '</li>'); 
    } 
}); 
var radio_price=$(this).data('price'); 
var radio_productName=$(this).data('name'); 
if(radio_price){ 
     price=radio_price; 
    productName=radio_productName; 
    sum = parseFloat(sum+price); 
    $('#selectedProductList > ul').append('<li>' + productName + '</li>'); 
     } 
$('#priceTotal').text(parseFloat(sum).toFixed(2)); 
}); 

Wenn Sie Schwierigkeiten antworten finden