当用户从表单的下拉列表中选择一个选项时，我试图添加价格。.
from也向数据库提交数据，因此字段的值被分配为"self-pick"one_answers"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>
当我尝试添加值以显示结果时，没有任何内容。。
var total = mug + charges;
对我不起作用。
不知怎么的，我做到了。
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>