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>
我有一个销售T恤的网站,上面的代码允许根据所选棉花的类型更新价格,并且工作正常。我希望XXL和XXXL尺码的衬衫花费更多,并且费用在价格中更新。如何将元素的值一起添加以显示一个价格,谢谢。
答案 0 :(得分:1)
正确的代码是
<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>
注意:如果您想要添加来自不同值属性的数字,则不鼓励带字母的数字(即€20.00)。也可以将value属性与选择下拉菜单的所有选项一起使用
答案 1 :(得分:0)
将格式与值分开。如果您想使用小数价格,请使用浮动来保留低位。用gildan和XXL测试。 (更新与更正 - price.toFixed(2))
工作示例here
<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>