单击时如何汇总框中所选项目的所有数据？

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

但它不起作用。不幸的是，我对 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">

脚本

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

var price=0;var productName='';

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

如果您发现任何困难，请回复。