我需要构建一个javascript函数和html5或简单的html。该功能应与HTML中的选择表格配合使用并显示以上价格。例如,用户想要选择计费周期,即1个月1年2年3年,每年的价格不同,如下所示,但是我需要在此列表上添加一个额外的订购按钮,即当用户选择1年时,系统会在列表上方自动显示1年的价格,然后当用户单击“立即订购”时,会自动转到该选项的链接。
<p>
<select name="forma" onchange="location = this.value;">
<option value="link">1 Month,19.90€,VAT Excl.</option>
<option value="link">1 Year,14.90€/mo,VAT Excl.</option>
<option value="">2 Years,13.90€/mo,VAT Excl.</option>
<option value="link">3 Years,12.90€/mo,VAT Excl.</option>
</select>
</p>
(我尝试了上述选项,但是当我单击一个选项时,会自动重定向到该链接,而不显示价格等)
有人可以帮助我吗?
我尝试了此代码,但需要修改
<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>