时间戳

首页 > 解决方案 > 使用 jquery 在表单中显示总价

jquery - 使用 jquery 在表单中显示总价

问题描述

我要做的是在用户从表单的下拉列表中选择一个选项时添加价格。

from 也将数据提交到数据库，因此字段的值分配为“selfpickup”和“delivery”。

我想要的是将价格分配给所选值，添加它们并在表单中显示总计..

表格内的代码：

<select name="mugtype" class="custom-select col-md-7 mb-3">
    <option selected value="SimpleMug">Simple Mug</option>
    <option value="Magic Mug">Magic Mug</option>
  </select>

<select name="delive" class="custom-select col-md-7">
    <option selected value="SelfPickup">Self Pickup</option>
    <option value="delivery">Deliver it to me</option>
  </select>

需要jquery：

如果选择了 SimpleMug，则将 300 的价格分配给变量并添加到总计中。

如果选择了 MagicMug，则将 400 的价格分配给变量并添加到总计中。

如果选择了 SelfPickup，则将 +0 的价格分配给变量并添加到总计中。

如果选择了交付，则将 +100 的价格分配给变量并添加到总计中。

我不知道任何 jquery 因此这个问题，任何帮助将不胜感激。

编辑：

我确实做到了这一点以获取值，然后显示它们各自的费用。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Umy Raff</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function(){
    $("select#mugtype").change(function(){
        var mugType = $(this).children("option:selected").val();
        if (mugType === "MagicMug" ) {
            var mug = 400;
        }else if (mugType === "SimpleMug") {
            var mug = 300;
        }    

        $("#result").html(mugType + ' = ' + mug + '.pkr');  
    });

    $("select#delive").change(function(){
        var method = $(this).children("option:selected").val();
        if (method === "SelfPickup" ) {
            var charges = 0;
        }else if (method === "TCS") {
            var charges = 100;
        }   
        $("#results").html(method +' Charges = ' + charges  + '.pkr');   
    });

});
</script>
</head> 
<body>
    <form>
        <select id="mugtype" name="mugtype" class="custom-select col-md-7 mb-3">
    <option selected >Select a Mug</option>
    <option value="SimpleMug">Simple Mug</option>
    <option value="MagicMug">Magic Mug</option>
  </select>
<br>
<select id="delive" name="delive" class="custom-select col-md-7">
    <option selected >Please select a method</option>
    <option value="SelfPickup">Self Pickup</option>
    <option value="TCS">Deliver it to me</option>

  </select>
    </form>
    <p id="result" >Mug Type</p>
    <p id="results" >Delivery Charges</p>

</body>
</html>

new 当我尝试添加值以显示结果时，那里什么都没有..

var total = mug + charges;

不适合我。

标签： jqueryvariablespricejquery-calculation

解决方案

不知何故，我能够做到。

js：

<script>
$(document).ready(function(){
    var fullCharges = 0;
    $("select#mugtype").change(function(){
        var mugType = $(this).children("option:selected").val();
        if (mugType === "MagicMug" ) {
            var mug = 400;
            fullCharges = mug;
        }else if (mugType === "SimpleMug") {
            var mug = 300;
            fullCharges = mug;
        }    

        $("#mCharges").html(mugType + ' = ' + fullCharges + '.pkr');  
    });

    $("select#delive").change(function(){
         method = $(this).children("option:selected").val();
        if (method === "SelfPickup" ) {
             charges = 0;
             $("#dCharges").html(method +' Charges = ' + charges  + '.pkr'); 
        }else if (method === "TCS") {
             charges = 100;
           total =  fullCharges + charges;

           $("#dCharges").html(method +' Charges = ' + charges  + '.pkr'); 
        }   

    });

    $(".et").click(function () {
        $("#total").html(total  + '.pkr'); 
     });


});
</script>

形式：

<form>
        <select id="mugtype" name="mugtype" class="custom-select col-md-7 mb-3">
    <option selected >Select a Mug</option>
    <option value="SimpleMug">Simple Mug</option>
    <option value="MagicMug">Magic Mug</option>
  </select>
<br>
<select id="delive" name="delive" class="custom-select col-md-7">
    <option selected >Please select a method</option>
    <option value="SelfPickup">Self Pickup</option>
    <option value="TCS">Deliver it to me</option>

  </select>
    </form>

    <br>
    <i>Mug Charges: </i><i id="mCharges" >Mug Type</i><br>
    <i>Delivery Charges: </i><i id="dCharges" >Delivery or Pickup</i><br>
    <input class="et" type="button" value="Total Charges: "/><i id="total" >Total</i>

推荐阅读