Как суммировать все данные из выбранных элементов в поле при нажатии?

Question

Я хочу, чтобы поле div отображало цены всех выбранных предметов отдельно и сумму цен на выбранные товары.

у меня есть это, чтобы отобразить окно с выбранными продуктами и сумму цен:

<div id="selectedProductList"> 
    <ul> 
     <li>selected product…</li> 
     <li>selected product…</li> 
    </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"> 

у меня есть этот код:

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

Но dosn't работу. К сожалению, мои знания также очень ограничены JavaScript. Потому что вы можете сразу это увидеть, вероятно, код настолько плох, что он никогда не будет работать. К сожалению, я не могу идти дальше. Есть идеи?

Answer 1

Попробуйте с этим кодом его работы отлично для меня.

<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() { 

вар цена = 0; вар ProductName = '';

$ (это) .each (функция() { вар parentlocal = $ (это);.?

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

Если вы нашли какие-либо трудности ответить