Question

所以我有一个表单的代码，其中包含一些带有不同选项的下拉菜单。我的问题是如何在下拉列表中为每个答案分配不同的价格，然后计算在表格底部的整体价格框中选择的所有下拉菜单的总和。我知道我需要使用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" />

感谢您的帮助。

Answer 1

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

这是一个普通的Javascript方法：

＆＃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;

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

2 个答案: