javascript - 如何取消选择告诉您哪个选项已更改的参数？如何获得正确的 JQuery 和 Javascript 总价？

Question

您将看到示例代码。

以下是我的问题:-我必须选择有值(value)的服务，但是当我取消服务时，总价格增加而不是减少。-我测试后取消了所有服务，但是总价还是有。我怎样才能让它回到零？

谢谢! :)

这是我的示例代码:

$(".chzn-select").chosen();
                    $("#cboservices").on("change", function(evt, params){
                        alert($(this).val());
                        //console.log($(this).val());
                        parray = $(this).val();
                        for (pcode in parray) {
                            get_priceList(parray[pcode]);
                            //console.log(sprice * totaltime);
                            tprice = tprice + (sprice * totaltime);
                        }

                        $("#subTotalPrice").html(number_format(tprice, 2, ".", ""));
                        console.log($("#subTotalPrice").html());            
                    });



                }
            },



Below are the sample HTML. I can't paste the whole code because it has limit. Thank you for the quick reply.


reservationDetails =
        '<div id="modal_div" class="widgets">'+
        '        <div class="widget widgetFix">'+
        '            <div class="title"><img src="images/icons/color/user-silhouette-question.png" alt="" class="titleIcon" /><h6>Information</h6></div>'+
        '            <br />'+
        '                <div id="refdiv" class="formRow modalFix">'+
        '                    <label>Reference No:</label>'+
        '                    <div class="formRight"><label class="labelFix inputFix" id="refNoValue">0</label></div>'+
        '                    <div class="clear"></div>'+
        '                </div>'+
        '                <div class="formRow modalFix">'+
        '                    <label>Room No:</label>'+
        '                    <div class="formRight"><label class="labelFix inputFix" id="roomNoValue">0</label></div>'+
        '                    <div class="clear"></div>'+
        '                </div>'+
        '                <div class="formRow modalFix">'+
        '                    <label>Name:</label>'+
        '                    <div class="formRight"><input type="text" id="customerNameValue" name="customerNameValue"/></div>'+
        '                    <div class="clear"></div>'+
        '                </div>'+

        '                <div class="formRow modalFix">'+
        '                <label>Services:</label>'+
        '                    <div class="formRight labelFix">'+
        '                        <select id="cboservices" data-placeholder="Choose your service(s)..." class="chzn-select" multiple="multiple" tabindex="6">'+
        '                       </select>'+  
        '                    </div>'+ 
        '                </div>'+ 

        '                <div class="formRow modalFix">'+
        '                    <label>Price:</label>'+
        '                    <div class="formRight"><label class="labelFix inputFix" id="subTotalPrice">0.00</label></div>'+
        '                    <div class="clear"></div>'+
        '                </div>'+

        '                <div class="clear"></div>'+ 

        '                <div class="formRow modalFix">'+
        '                <label>Personnel:</label>'+
        '                    <div class="formRight labelFix">'+
        '                        <select id="cbopersonnels" data-placeholder="Choose your attendant(s)..." class="chzn-select" multiple="multiple" tabindex="6">'+
        '                       </select>'+  
        '                    </div>'+ 
        '                </div>'+ 
        '                <div class="clear"></div>'+ 

        '                <div class="formRow modalFix">'+
        '                    <label>Date:</label>'+
        '                    <div class="formRight"><label class="labelFix inputFix" id="dateValue">0</label></div>'+
        '                    <div class="clear"></div>'+
        '                </div>'+
        '                <div class="formRow modalFix">'+
        '                     <label>Start Time:</label>'+
        '                     <div class="formRight"><label class="labelFix inputFix" id="startTimeValue">0</label></div>'+
        '                    <div class="clear"></div>'+
        '                </div>'+
        '                <div class="formRow modalFix">'+
        '                    <label>End Time:</label>'+
        '                    <div class="formRight"><label class="labelFix inputFix" id="endTimeValue">0</label></div>'+
        '                    <div class="clear"></div>'+
        '                </div>'+
        '                <div class="formRow modalFix">'+
        '                    <label>Status</label>'+
        '                    <div class="formRight ">'+
        '                        <select id="statusValue" name="statusValue">'+
        '                           <option value="reserved">Reserved</option>'+
        '                           <option value="paid">Paid</option>'+
        '                        </select>'+
        '                    </div>'+
        '                    <div class="clear"></div>'+
        '                </div>'+
        '                <div class="formRow modalFix" style="margin-top:3px">'+
        '                    <label>Remarks</label>'+
        '                    <div id="remarksdiv" class="formRight ">'+
        '                        <textarea id="remarksValue" name="remarksValue" style="resize:none;"></textarea>'+
        '                    </div>'+
        '                    <div class="clear"></div>'+
        '                </div>'+
        '            <br />'+
        '        </div>'+  
        '    <div class="clear"></div>'+
        '</div>';

Answer 1

每次进入循环时，必须先将 amount 值设置为 0。

例如:

$("#cboservices").on("change", function(evt, params){
    alert($(this).val());
    //console.log($(this).val());
    parray = $(this).val();
    tprice = 0; //insert this line <<<<<<<<<<<<<<<<<=====[xxx]
    for (pcode in parray) {
        get_priceList(parray[pcode]);
        //console.log(sprice * totaltime);
        tprice = tprice + (sprice * totaltime);
    }

$("#subTotalPrice").html(number_format(tprice, 2, ".", ""));
console.log($("#subTotalPrice").html()); 


});

另外我想补充一下 jquery 选择的插件功能:

$("cboservices").on("change", function(){});

每次选择和/或取消选择 <option></option> 时都会调用您的 <select></select> 上的元素标签。