的JavaScript從下拉菜單和複選框計算總不更新爲0時，另一個選擇框

我有一個基於下拉框是計算總的和複選框的腳本，我有主下拉菜單與的JavaScript從下拉菜單和複選框計算總不更新爲0時，另一個選擇框

<select id="type" name="menu"> 
<option value="">Service Needed</option> 
<option value="kite">Car Wash & Detailing</option> 
<option value="user">Mechanic visit</option> 
<option value="elect">Electrican visit</option> 
<option value="tyre">Tyre Service</option> 
<option value="bat">Battery Service</option> 
</select> 

SUB MENU 


<select id="type2" name="buyername" class="form-control input-lg form-el calculate" > 
<option data-price="0" value="">-- Select --</option> 
<option data-price="100" value="kite1">Car Wash exterior</option> 
<option data-price="150" value="kite1">Car Wash In & Out</option> 
<option data-price="1000" value="kite2">Full Detailing</option> 
</select>

現在時你選擇服務如洗車&詳細說明然後從子菜單中選擇洗車外部顯示的總價格是100，然後我點擊像技工之類的另一項服務訪問價格仍然在100，它應該再次爲0，因爲價格菜單被取消

這裏是腳本

<script type='text/javascript'>//<![CDATA[ 
$(function(){ 
$("select.calculate").on("change", calc); 
$("input[type=checkbox].calculate").on("click", calc); 

function calc() { 
var basePrice = 0; 
newPrice = basePrice; 
// You need to loop over, not only the selected option, but also the checked checboxes 
$("select.calculate option:selected,input[type=checkbox].calculate:checked").each(function (idx, el) { 
    newPrice += parseInt($(el).data('price'), 10); 
}); 

newPrice = newPrice.toFixed(2); 
$("#item-price").html(newPrice); 
} 
}); 
</script>

任何想法如何解決這個問題。

來源

2017-10-11 Salwa El Bannan

'java'！='javascript' –

https://jsfiddle.net/eLL4bku3/1/ –

你需要一個復位事件處理程序的主菜單上，像這樣：

$("#type").on("change", function() { 
     $("select.calculate option").eq(0).prop('selected', true); 
    calc(); 
});

當你改變你的主菜單（觸發change事件），這將您的子菜單重置爲第一個選項（--select-- ）並重新運行你的calc函數，將輸出置零。

這是fiddle。

來源

2017-10-11 22:07:34 delinear

工作，謝謝非線性，但如果我有第二個子菜單，從子菜單1獲得總後移動到子菜單2會出現同樣的問題。 –

從洗車和詳細的移動，然後到子菜單「洗車外部」將給總共100，現在直接移動到子菜單電池服務「電池救援」將增加電池救援菜單價格洗車外觀價格 –

https：// jsfiddle。淨/ eLL4bku3/1 / –

的JavaScript從下拉菜單和複選框計算總不更新爲0時，另一個選擇框

回答

相關問題