在jquery中更改事件

时间:2015-03-15 14:53:45

标签: javascript jquery html

我需要总价格(基值+标识值+材料价值)

我试过这段代码mycode

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

});

1 个答案:

答案 0 :(得分: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值访问徽标值

 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