在 jQuery 中更改事件

change event in jquery

本文关键字：事件 jQuery      更新时间：2023-09-26

我需要总价来自（基础值+徽标值+材料值）

我试过这个代码我的代码

条件1）如果选择徽标类型和材料类型，我需要获得总值。2）如果我同时选择了两个值，现在正在更改徽标值，我需要获得正确的总数3） 选择每个选项后动态显示的总计4）不使用提交按钮。

.HTML 

<p class="logotype left customLabel"><span>base price :</span>1000</p>
<p class="logotype left customLabel"><span>Logo Type :</span></p>
   <form class="left margin0" name="logotypeform" method="post">
        <select name="logoprice" id="logotypeprice">
        <option value="">--</option>           
            <option value="50">Default logo</option>
            <option value="100">Imported logo</option>
            <option value="25">Text</option>
             <option value="0">None</option>
        </select>
    </form>
<input class="logoTypeVal" type="" value="">
  <p class="Material left customLabel"><span>Material    :</span></p>
   <form class="left margin0" name="priceform" method="post">
        <select name="price" id="materialprice">
        <option value="">--</option>
            <option value="10">Nylon</option>
            <option value="20">Sticker</option>
            <option value="30">Printed</option>
            <option value="30">Embroiding</option>
             <option value="0">None</option>
        </select>
    </form>
<input class="materialVal" type="" value="">
<p class="Material left customLabel"><span>Total Value    :</span></p><input class="totalVal" type="" value="total value">

.JS

jQuery(document).ready(function(){
     var baseValue = 1000;
     jQuery('#logotypeprice').change(function(){
         var logotypeprice = jQuery(this).val();
         jQuery('input.logoTypeVal').val(logotypeprice);
     });
     jQuery('#materialprice').change(function(){
         var materialprice = jQuery(this).val();
         jQuery('input.materialVal').val(materialprice);
         var baseprice = "<?php echo $basePrice ?>";
         var logoval = logotypeprice;
         var totalprice = parseInt(baseValue) + parseInt(materialprice) + parseInt(logoval);
         alert(totalprice);
         jQuery('input.totalVal').val(totalprice);
     });    
});

更新：

由于您需要根据更改每个选择来更新总值，因此应计算两个处理程序的总计。像下面一样

var baseValue = 1000,
    logotypeprice = 0,
    materialprice = 0;
$(document).ready(function () {
    $('#logotypeprice').change(function () {
        logotypeprice = jQuery(this).val();
        $('input.logoTypeVal').val(logotypeprice);
        calculateTotal();
    });
    $('#materialprice').change(function () {
        materialprice = $(this).val();
        $('input.materialVal').val(materialprice);
        calculateTotal();
    });
});
function calculateTotal() {
    var totalprice = parseInt(baseValue) + parseInt(materialprice) + parseInt(logotypeprice);
    $('input.totalVal').val(totalprice);
}

这是一个更新的演示

PS：与其为每个元素编写jQuery，不如使用简短版本$

您正在尝试访问logotypeprice更改处理程序中无法访问materialprice变量

要么像这样全局声明logotypeprice 

 var baseValue = 1000;
 var logotypeprice;
 jQuery('#logotypeprice').change(function(){
     logotypeprice = jQuery(this).val();
     jQuery('input.logoTypeVal').val(logotypeprice);
 });
 jQuery('#materialprice').change(function(){
     var materialprice = jQuery(this).val();
     jQuery('input.materialVal').val(materialprice);
     var baseprice = "100";
     var logoval = logotypeprice;
     var totalprice = parseInt(baseValue) + parseInt(materialprice) + parseInt(logoval);
     alert(totalprice);
     jQuery('input.totalVal').val(totalprice);
 });

或

从input.logoTypeVal或#logotypeprice这样的值访问徽标值

 jQuery('#materialprice').change(function(){
     var materialprice = jQuery(this).val();
     jQuery('input.materialVal').val(materialprice);
     var baseprice = "100";
     var logoval = jQuery('input.logoTypeVal').val(); // OR logoval = jQuery('#logotypeprice').val();
     var totalprice = parseInt(baseValue) + parseInt(materialprice) + parseInt(logoval);
     alert(totalprice);
     jQuery('input.totalVal').val(totalprice);
 });

这是一个演示

相关文章：