Question

我有一个基于下拉框和复选框计算总数的脚本，我有主下拉菜单

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

任何想法如何解决这个问题。??

Answer 1

您需要在主菜单上使用重置事件处理程序，如下所示：

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

当您更改主菜单（触发更改事件）时，这会将子菜单重置为第一个选项（--select--）并重新运行计算功能，将输出归零。

这里是fiddle。

javascript在下拉列表中计算总计，在另一个选择框

1 个答案: