javascript从下拉列表中计算总计，并且在另一个选择框上时，复选框未更新为0

Question

I have a script that calculate total based on dropdown boxes and check boxes , I have main drop down menu with

<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>      

now when you select service like car wash & detailing then choose car wash exterior from sub menu the total price shown is 100, then after i click on another service like mechanic visit the price still on 100 , it should be 0 again as the price menu is deselected

here is the script

 <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>

any idea how to fix this.??

Answer 1

You need a reset event handler on your main menu, something like this:

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

When you change your main menu (triggering a change event) this will reset your sub menu to the first option ( --select-- ) and rerun your calc function, zeroing the output.

Here's a fiddle .