如何在單擊時從一個框中選擇所有項目的數據？

我想要一個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中也非常有限。因爲你可以立即看到它，可能代碼太糟糕了，以至於他永遠無法工作。不幸的是，我不能再走了。有任何想法嗎？

來源

2017-02-03 user2693715

結果是什麼 –

可我知道你在數據屬性中保留價格的原因是什麼？你可以將價格作爲價值知道.....任何原因？ –

@RajeshBaskaran 在結果列表中，我想獲得總金額和清單所選產品的產品名稱，我認爲使用數據屬性會更容易，因爲它可能是ac奇怪的是， – user2693715

嘗試使用此代碼，其工作正常。

<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 = '';

$（本）。每個（函數（）{VAR 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)); 
});

如果您遇到任何疑難，回覆

來源

2017-02-03 15:20:51

哇！你很棒。這很棒。是否仍有避免雙重值的機會？所以，我有單選按鈕來選擇產品和一個單選按鈕來刪除。當我單擊要刪除的單選按鈕時，該值也列爲li元素。如果從列表和總和中刪除該值，那將會很好。與選擇字段相同。點擊後，它被禁用，但無法撤消錯誤條目。 – user2693715

你是如何取消選擇單選按鈕的。你有兩個不同的單選按鈕的名字，然後你選擇後就不能取消選擇單選按鈕。 –

如何在單擊時從一個框中選擇所有項目的數據？

回答

相關問題