Javascript下拉表格数学计算

Question

我正在尝试创建一个包含两个下拉菜单的页面，然后当用户按下Submit时，它将基于该下拉菜单提供的数据来计算价格。 它需要从第一个下拉菜单选项中选取1或2，再乘以第二个下拉菜单选项的值，再乘以0.2，然后在用户按下Submit时将其输出。 我试图使其正常工作，但我不断收到NaN错误。 有什么帮助吗？

<head>
<script type="text/javascript">
function price() {
        var sqBn = document.priceCalc.squareOrBanner;
        var Amt = document.priceCalc.number;
    var price = sqBn * Amt * 0.2;
    document.write(price);
}
</script>

<form name="priceCalc" action="priceCalcPage.html" onsubmit="document.write(price())">
<div align="center">
<select name="squareOrBanner">
<option value="1">Square</option>
<option value="2">Banner</option>
</select>

<select name="number">
<option value="250">250</option>
<option value="500">500</option>
<option value="750">750</option>
<option value="1000">1000</option>
</select>
<br><input type="submit" value="Figure out pricing!"><br>
</div>
</form>

Answer 1

也许您正在寻找这样的东西：

http://jsfiddle.net/JSvSn/1/

您需要访问这些对象中的value属性：

var price = sqBn.value * Amt.value * 0.2;

编辑：这是一个使用价格更新输入框值的版本： http : //jsfiddle.net/JSvSn/5/

编辑2： 在div中显示价格。

Answer 2

我不确定sqBn.value是否可在所有浏览器上使用。 使用会更安全

sqBn.options[sqBn.selectedIndex].value

如果您仍然获得NaN结果，请尝试

parseInt(sqBn.options[sqBn.selectedIndex].value)

如果要执行此计算而不刷新页面，请更改表单声明，如下所示：

<form name="priceCalc" action="priceCalcPage.html" onsubmit="document.write(price());return false;">

这样，onsubmit将被执行，但不会向操作提交任何内容。 如果要提交，仍然可以通过javascript（ document.priceCalc.submit() ）进行提交。

Javascript下拉表格数学计算

问题描述

2 个解决方案

解决方案1
2 已采纳 2010-07-19 03:18:26

解决方案2
1 2010-07-19 06:27:40

Javascript下拉表格数学计算

问题描述

2 个解决方案

解决方案1 2 已采纳 2010-07-19 03:18:26

解决方案2 1 2010-07-19 06:27:40

解决方案1
2 已采纳 2010-07-19 03:18:26

解决方案2
1 2010-07-19 06:27:40