Question

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尺码的衬衫花费更多，并且费用在价格中更新。如何将元素的值一起添加以显示一个价格，谢谢。

Answer 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属性与选择下拉菜单的所有选项一起使用

Answer 2

将格式与值分开。如果您想使用小数价格，请使用浮动来保留低位。用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>

通过多种选择动态更新价格

2 个答案: