0

看看这个小提琴：

http://jsfiddle.net/gD3ax/1/

或者这里是完整的标记

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <title>Calculator</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">
        .header {
            font-size: 10pt;
            color: white;
            font-weight: 700;
            text-decoration: none;
            text-underline-style: none;
            text-line-through: none;
            font-family: Arial;
            border-top: .5pt solid #C4D79B;
            border-right: none;
            border-bottom: .5pt solid #C4D79B;
            border-left: .5pt solid #C4D79B;
            background: #9BBB59;
            mso-pattern: #9BBB59 none;
            padding: 5px;
            display: block;
            width:138px;
            text-align: center;
        }
        .drop {
            width: 150px;
        }
    </style>
</head>

<body>
    <script type="text/javascript">
        function calculate() {
            // 'improve' Math.round() to support a second argument
            var _round = Math.round;
            Math.round = function (number, decimals /* optional, default 0 */ ) {
                if (arguments.length == 1)
                    return _round(number);

                var multiplier = Math.pow(10, decimals);
                return _round(number * multiplier) / multiplier;
            }

            /* examples
            Math.round('123.4567', 2); // => 123.46
            Math.round('123.4567');    // => 123
            */

            msfPlanA = 25.00;
            msfPlanB = 50.00;
            msfPlanC = 79.99;

            minPlanA = 500;
            minPlanB = 1700;
            minPlanC = 3000;

            smsPlanA = 200;
            smsPlanB = 600;
            smsPlanC = 1000;

            dataPlanA = 100;
            dataPlanB = 250;
            dataPlanC = 500;

            plan = document.getElementById("plans").options.value;
            days = document.getElementById("days").options.value;

            if (plan == "Plan A") {
                document.getElementById("msf").value = ('$' + Math.round(msfPlanA / 30 * days, 2));
                document.getElementById("min").value = (Math.floor(minPlanA / 30 * days) + ' minutes');
                document.getElementById("sms").value = (Math.floor(smsPlanA / 30 * days) + ' texts');
                document.getElementById("data").value = (Math.floor(dataPlanA / 30 * days) + ' MBs');
            } else if (plan == "Plan B") {
                document.getElementById("msf").value = ('$' + Math.round(msfPlanB / 30 * days, 2));
                document.getElementById("min").value = (Math.floor(minPlanB / 30 * days) + ' minutes');
                document.getElementById("sms").value = (Math.floor(smsPlanB / 30 * days) + ' texts');
                document.getElementById("data").value = (Math.floor(dataPlanB / 30 * days) + ' MBs');
            } else {
                document.getElementById("msf").value = ('$' + Math.round(msfPlanC / 30 * days, 2));
                document.getElementById("min").value = (Math.floor(minPlanC / 30 * days) + ' minutes');
                document.getElementById("sms").value = (Math.floor(smsPlanC / 30 * days) + ' texts');
                document.getElementById("data").value = (Math.floor(dataPlanC / 30 * days) + ' MBs');
            }
        }
    </script>
    <form action="">
        <table>
            <tbody>
                <tr>
                    <td>    <span class="header">How many days?</span>

                    </td>
                    <td>    <span class="header">Which plan?</span>

                    </td>
                </tr>
                <tr>
                    <td width="120px">
                        <select class="drop" id="days">
                            <option value="1">1</option>
                            <option value="2">2</option>
                            <option value="3">3</option>
                            <option value="4">4</option>
                            <option value="5">5</option>
                            <option value="6">6</option>
                            <option value="7">7</option>
                            <option value="8">8</option>
                            <option value="9">9</option>
                            <option value="10">10</option>
                            <option value="11">11</option>
                            <option value="12">12</option>
                            <option value="13">13</option>
                            <option value="14">14</option>
                            <option value="15">15</option>
                            <option value="16">16</option>
                            <option value="17">17</option>
                            <option value="18">18</option>
                            <option value="19">19</option>
                            <option value="20">20</option>
                            <option value="21">21</option>
                            <option value="22">22</option>
                            <option value="23">23</option>
                            <option value="24">24</option>
                            <option value="25">25</option>
                            <option value="26">26</option>
                            <option value="27">27</option>
                            <option value="28">28</option>
                            <option value="29">29</option>
                            <option value="30">30</option>
                        </select>
                    </td>
                    <td>
                        <select class="drop" id="plans">
                            <option value="Plan A">Plan A</option>
                            <option value="Plan B">Plan B</option>
                            <option value="Plan C">Plan C</option>
                        </select>
                    </td>
                    <td>
                        <input type="button" value="Submit" onclick="calculate()" />
                    </td>
                </tr>
            </tbody>
        </table>
        <br />
        <br />
        <table>
            <tbody>
                <tr>
                    <td>    <span class="header">Prorated MSF</span>

                    </td>
                    <td>    <span class="header">Minutes</span>

                    </td>
                    <td>    <span class="header">SMS</span>

                    </td>
                    <td>    <span class="header">Data</span>

                    </td>
                </tr>
                <tr>
                    <td>
                        <input size="19" type="text" id="msf" value="Prorated MSF" readonly="readonly" />
                    </td>
                    <td>
                        <input size="19" type="text" id="min" value="Prorated Minutes" readonly="readonly" />
                    </td>
                    <td>
                        <input size="19" type="text" id="sms" value="Prorated SMS" readonly="readonly" />
                    </td>
                    <td>
                        <input size="19" type="text" id="data" value="Prorated Data" readonly="readonly" />
                    </td>
                </tr>
            </tbody>
        </table>
    </form>
</body>
</html>

它在 IE 和 Opera 中运行良好，但在 Chrome、Safari 或 Firefox 中运行良好。在 Chrome、Safari 和 Firefox 中，我得到NaN的不是实际值。建议？

我需要让它在所有 5 个主要浏览器上都能正常工作。

提前致谢！

4

2 回答 2

2

回答只是为了没有其他人接受我的评论

document.getElementById("plans").value

不是 .options.value 同上几天

于 2013-04-07T19:28:56.240 回答
1

您对“选项”的使用不正确，这令人惊讶为什么它在某些情况下有效。

var x = document.getElementById("plans").selectedIndex;
plan = document.getElementById("plans").options[x].value;

options 返回一个选项数组，您需要从多个选项中选择一个。

于 2013-04-07T19:28:49.943 回答