计算多次降价的价格以创造价格

时间:2016-07-13 19:21:56

标签: javascript html forms

所以我有一个表单的代码,其中包含一些带有不同选项的下拉菜单。我的问题是如何在下拉列表中为每个答案分配不同的价格,然后计算在表格底部的整体价格框中选择的所有下拉菜单的总和。我知道我需要使用Javascript,但我对此很新,并且不完全理解它。

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

感谢您的帮助。

2 个答案:

答案 0 :(得分:0)

您需要将实际价格放在某处或获得它们。因此,一个可能性是您有一些价格的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'));
  }
}

当然,您需要从该代码函数中创建并将其绑定到选择更改事件

答案 1 :(得分:0)

这是一个普通的Javascript方法:

&#13;
&#13;
@AfterClass
&#13;
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"));
}
&#13;
&#13;
&#13;