使用Select opton为不同的选项+底价动态更新价格

我需要构建一个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>
xiacy83 回答:使用Select opton为不同的选项+底价动态更新价格

暂时没有好的解决方案,如果你有好的解决方案,请发邮件至:iooj@foxmail.com
本文链接:https://www.f2er.com/3156611.html

大家都在问