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