javascript - jquery中的更改事件

Question

我需要总价(基础值(value)+标志值(value)+ Material 值(value))

我试过这段代码mycode

条件 1)如果选择 Logo 类型和 Material 类型，我需要获得总值(value)。 2)如果我同时选择了这两个值，现在我正在更改 Logo 值，我需要获得正确的总数 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);
     });    

});

Answer 1

更新:

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

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);
}

这是更新的 demo

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 值访问 Logo 值，如下所示

 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);
 }); 

这是一个demo