여러 옵션으로 가격이 동적으로 업데이트됩니다.

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>

나는 티셔츠를 판매하는 사이트가 있습니다. 위 코드는 선택한 면화 유형에 따라 가격이 업데이트되는 것을 허용합니다. XXL 및 XXXL 크기의 셔츠는 가격이 더 비싸고 가격은 가격으로 업데이트되기를 바랍니다. 하나의 가격을 표시하기 위해 요소의 값을 함께 추가하는 방법, 감사합니다. 서로 다른 값이 다음 문자와 숫자를 속성에서 번호를 추가 할 경우 discouraged.also 모든으로 값 속성을 사용 (예 : € 20.00.) :여러 옵션으로 가격이 동적으로 업데이트됩니다.

출처

2014-11-16 user3017497

올바른 코드는

<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>

주 것 선택 드롭 다운 옵션

출처

2014-11-16 19:40:16

감사 분명 지금 – user3017497

꽤가 서로 옆에 대신 하나를 추가하는 두 숫자를 표시 작동하지 않습니다 – user3017497

@ user3017497 새 업데이트 된 코드 –

값에서 서식을 구분하십시오. 분수 가격을 사용하려는 경우에 대비하여 float를 사용하여 낮은 순위의 위치를 유지합니다. 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>

출처

2014-11-16 19:41:12 Threadid

가격을 표시하는 div를 변경해야합니까? 그것은 x의 – user3017497

사과로 나오고 있습니다. 급하게 - 나쁜 형태. 정정을 요한 - price.toString (2). 저가형을 사용하기를 원한다면 저수준 포지션을 유지하기 위해 float를 사용하는 것이 좋습니다. gildan 및 XXL로 테스트하십시오. – Threadid

이 확장 기능으로 사용자가 특정 이메일 주소를 가지고 있다면 10 % 할인과 같은 가격 할인을 적용하는 방법을 설명하겠다. 감사합니다 – user3017497

여러 옵션으로 가격이 동적으로 업데이트됩니다.

답변

관련 문제