여러 개의 드롭 다운 가격을 계산하여 가격을 계산하십시오.

Question

그래서 다양한 옵션이 포함 된 드롭 다운 메뉴가있는 양식의 코드가 있습니다. 내 질문은 드롭 다운의 각 답변을 다른 가격에 할당 한 다음 양식 하단의 전체 가격 상자에서 선택한 모든 드롭 다운의 합계를 계산하는 방법입니다. 나는 자바 스크립트를 사용해야 할 필요가 있다는 것을 모았지만, 나는 이것에 대해 아주 익숙하고 완전히 이해하지 못하고있다. 어떤 도움

<form action="testemail@gmail.com" method="post"><fieldset> 
    <select name="Colour"> 
      <option value="Choose a colour">Choose a colour</option> 
      <option value="Red">Red</option> 
      <option value="Blue">Blue</option> 
      <option value="Green">Green</option> 
      <option value="Purple">Purple</option> 
    </select> 
    </fieldset> 
    <fieldset> 
    <select name="Size"> 
      <option value="Choose a size">Choose a size</option> 
      <option value="Large">Large</option> 
      <option value="Medium">Medium</option> 
      <option value="Small">Small</option> 
      <option value="X Small">X Small</option> 
    </select> 
    </fieldset> 
<fieldset> 
    <select name="Material"> 
      <option value="Choose a material">Choose a material</option> 
      <option value="Cotton">Cotton</option> 
      <option value="Polyester">Polyester</option> 
      <option value="Wool">Wool</option> 
      <option value="Velvet">Velvet</option> 
    </select> 
    </fieldset> 
    <input type="submit" value="Submit now" /> 

감사합니다.

Answer 1

어딘가에 실제 가격을 입력하거나 가져와야합니다. 그래서 하나 개있는 posibility은 일부 JS 가격으로 객체 또는

<select name="Material"> 
     <option data-price='0' value="Choose a material">Choose a material</option> 
     <option data-price='2' value="Cotton">Cotton</option> 
     <option data-price='2.5' value="Polyester">Polyester</option> 
     <option data-price='7' value="Wool">Wool</option> 
     <option data-price='13' value="Velvet">Velvet</option> 
</select> 

같은 옵션에 대한 가격을 추가 할 수 있습니다 다음은 물론

var sum = 0; 
var selected = $('option').prop('selected'); 
for(var i=0;i<selected.length;i++) 
{ 
    if(selected[i].attr('data-price') !== '0') 
    { 
    sum+= parseInt(selected[i].attr('data-price')); 
    } 
} 

당신이 필요로 같은 선택 옵션에서 모든 가격을 합계 할 수있다이다 그 코드 함수에서 확인하고 변경 이벤트 여기

Answer 2

을 선택하는 바인딩은 바닐라의 자바 스크립트 방법 :

function getPrice(type) { 
 
    var obj = document.getElementById(type); 
 
    var price = obj.options[obj.selectedIndex].getAttribute("data-price"); 
 
    if (price == null) 
 
    price = 0; 
 
    return parseInt(price); 
 
} 
 

 
function updatePrice() { 
 
    document.getElementById("price").innerHTML = "Total: $" + 
 
    (getPrice("color") + getPrice("size") + getPrice("material")); 
 
}

<form action="testemail@gmail.com" method="post"> 
 
    <fieldset> 
 
    <select name="Colour" id="color" onChange="updatePrice()"> 
 
     <option value="Choose a colour">Choose a colour</option> 
 
     <option value="Red" data-price="10">Red</option> 
 
     <option value="Blue" data-price="20">Blue</option> 
 
     <option value="Green" data-price="30">Green</option> 
 
     <option value="Purple" data-price="40">Purple</option> 
 
    </select> 
 
    </fieldset> 
 
    <fieldset> 
 
    <select name="Size" id="size" onChange="updatePrice()"> 
 
     <option value="Choose a size">Choose a size</option> 
 
     <option value="Large" data-price="40">Large</option> 
 
     <option value="Medium" data-price="30">Medium</option> 
 
     <option value="Small" data-price="20">Small</option> 
 
     <option value="X Small" data-price="10">X Small</option> 
 
    </select> 
 
    </fieldset> 
 
    <fieldset> 
 
    <select name="Material" id="material" onChange="updatePrice()"> 
 
     <option value="Choose a material">Choose a material</option> 
 
     <option value="Cotton" data-price="10">Cotton</option> 
 
     <option value="Polyester" data-price="20">Polyester</option> 
 
     <option value="Wool" data-price="30">Wool</option> 
 
     <option value="Velvet" data-price="40">Velvet</option> 
 
    </select> 
 
    </fieldset> 
 
    <fieldset> 
 
    <div id="price">Total: $0 
 
    </div> 
 
    </fieldset> 
 
    <input type="submit" value="Submit now" />