具有多种选择的动态价格更新
[英]Dynamic updating of prices with multiple options
问题描述
script type="text/javascript">
function updatePrice() {
var price = document.getElementById("product").value;
document.getElementById("price").innerHTML="<p>PRICE: " + price + "</p>";
}
</script>
</head>
<br>
<label >Shirt Type</label>
<body onload="updatePrice()">
<select id="product" onchange="updatePrice()">
<option id="basic" value="€20.00"> Basic Shirt (€20.00)</option>
<option id="poly" value="€25.00">Poly-Cotton Blend (€25.00)</option>
<option id="gildan" value="€28.00">Gildan Cotton (€28.00)</option>
<option id="organic" value="€30.00">Organic Cotton (€30.00)</option>
</select>
<div id="price"><p>PRICE: €XX.XX</p></div>
<label >Shirt Size</label>
<select id="size" onchange="updatePrice()">
<option id="None">Choose Size</option>
<option id="Small">Small</option>
<option id="Medium">Medium</option>
<option id ="Large">Large</option>
<option id ="XL">XL</option>
<option id ="XXL"value= "€2.00">XXL</option>
<option id ="XXXL" value="€3.00">XXXL</option>
</select>
I have a site which sells t-shirts, The code above allows the price to update depending on the type of cotton selected and that works fine. 
我有一个出售T恤的网站，上面的代码允许价格根据所选的棉花类型而更新，并且效果很好。 I want the XXL and XXXL size shirts to cost more and for that charge to be updated in the price. 我希望XXL和XXXL尺寸的衬衫价格更高，并且要在价格中更新该费用。 How do I add the values of elements together to display one price, Thanks. 我如何将元素的值加在一起以显示一个价格，谢谢。
2 个解决方案
解决方案1
1 已采纳 2014-11-16 19:40:16
the correct code would be 正确的代码是
<script type="text/javascript">
function updatePrice() {
var price = document.getElementById("product").value;
var size_price = document.getElementById("size").value;
var a=parseInt(price);//parsed type price
var b=parseInt(size_price);//parsed size price
if(size_price != "null")//if the value selected is not null then add the prize
{
var fin_price = a+b; //add the prices
}
else //if the value selected is null then fin_prize=price
{
var fin_price = price;
}
document.getElementById("price").innerHTML="<p>PRICE: " + fin_price + "</p>";
}
</script>
<br>
<label >Shirt Type</label>
<body onload="updatePrice()">
<select id="product" onchange="updatePrice()">
<option id="basic" value="20.00"> Basic Shirt (€20.00)</option>
<option id="poly" value="25.00">Poly-Cotton Blend (€25.00)</option>
<option id="gildan" value="28.00">Gildan Cotton (€28.00)</option>
<option id="organic" value="30.00">Organic Cotton (€30.00)</option>
</select>
<div id="price"><p>PRICE: €XX.XX</p></div>
<label >Shirt Size</label>
<select id="size" onchange="updatePrice()">
<option id="None" value="null">Choose Size</option>
<option id="Small" value="0.00">Small</option>
<option id="Medium" value="0.00">Medium</option>
<option id ="Large" value="0.00">Large</option>
<option id ="XL" value="0.00">XL</option>
<option id ="XXL"value= "2.00">XXL</option>
<option id ="XXXL" value="3.00">XXXL</option>
</select>
Note :if you want to add numbers from different value attributes then numbers with letters (ie. €20.00) is discouraged.also use the value attribute with all options of a select dropdown 注意 ：如果要添加来自不同值属性的数字，则不建议使用带字母的数字（即€20.00）。还要将value属性与select下拉菜单的所有选项一起使用
解决方案2
0 2014-11-16 19:41:12
Separate the formatting from the value. 将格式与值分开。 Use float to preserve low order positions in case you ever want to use fractional prices. 如果您想使用分部价格，请使用浮动来保留低位头寸。 Test with gildan and XXL. 用gildan和XXL测试。 (update with correction - price.toFixed(2)) （进行更正更新-price.toFixed（2））
<script type="text/javascript">
function updatePrice() {
var discount = '.10';
var discountFactor = 1.0-parseFloat(discount)
var price = (parseFloat(document.getElementById("product").value) + parseFloat(document.getElementById("size").value))*discountFactor;
document.getElementById("price").innerHTML="<p>PRICE: €" + price.toFixed(2) + "</p>";
}
</script>
</head>
<br>
<label >Shirt Type</label>
<body onload="updatePrice()">
<select id="product" onchange="updatePrice()">
<option id="basic" value="20.00"> Basic Shirt (€20.00)</option>
<option id="poly" value="25.00">Poly-Cotton Blend (€25.00)</option>
<option id="gildan" value="28.30">Gildan Cotton (€28.30)</option>
<option id="organic" value="30.00">Organic Cotton (€30.00)</option>
</select>
<div id="price"><p>PRICE: €XX.XX</p></div>
<label >Shirt Size</label>
<select id="size" onchange="updatePrice()">
<option id="None" value= "0.00">Choose Size</option>
<option id="Small" value= "0.00">Small</option>
<option id="Medium" value= "0.00">Medium</option>
<option id ="Large" value= "0.00">Large</option>
<option id ="XL" value= "0.00">XL</option>
<option id ="XXL" value= "2.25">XXL</option>
<option id ="XXXL" value="3.00">XXXL</option>
</select>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.