Question

我希望得到“（+ $”和“）”之间的金额，并将其添加到输入框的值。

例如，您选择以下内容：
Solero Exotic（+ $ 1.85）
卡布奇诺（+ $ 2.49）
iMac 27英寸3.1GHz（+ $ 1,999.00）

这些金额将从您选择的选项中减去：
1.85
2.49
1,999.00

输入框将显示： 2003.34

任何人都知道可以执行此操作的JavaScript代码吗？（不向Option标签添加更多属性）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Get amount and put elsewhere</title>
</head>

<body>

<form action="">

  <fieldset>

    <ul style="list-style:none;padding-left:0;">
      <li>Ice Cream:
        <select class="optionsIceCream" name="IceCream">
          <option value="IceCream01">Select Ice Cream</option>
          <option value="IceCream02">Solero Exotic (+$1.85)</option>
          <option value="IceCream03">Magnum Ecuador (+$4.85)</option>
          <option value="IceCream04">Cornetto Enigma (+$2.00)</option>
        </select>
      </li>

      <li>Coffee:
        <select class="optionsCoffee" name="Coffee">
          <option value="Coffee01">Select Coffee</option>
          <option value="Coffee02">Cup of Joe (+$0.99)</option>
          <option value="Coffee03">Cappuccino (+$2.49)</option>
          <option value="Coffee04">Latte Macchiato (+$2.99)</option>
        </select>
      </li>

      <li>Computers:
        <select class="optionsComputers" name="Computers">
          <option value="Computer01">Select Computer</option>
          <option value="Computer02">Dell Inspiron 620 (+$449.99)</option>
          <option value="Computer03">HP Pavilion dv7t (+$949.99)</option>
          <option value="Computer04">iMac 27-inch 3.1GHz (+$1,999.00)</option>
        </select>
      </li>
    </ul>

    Total: <input class="totalAmount" type="text" disabled="disabled" value="0.00" />

  </fieldset>

</form>

</body>
</html>

的 * ** * ** * ** * ** * ** * ** 更新：09-09-2011 ** * ** * ** * ** * ** * ** *

我找到了一个解决方案，感谢来自 Yahoo的Dominic H！答案的

它很简单但很有效，而且效果很好！

这是整个代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Get amount and put elsewhere</title>
</head>

<body>

<form action="">

  <fieldset>

    <ul style="list-style:none;padding-left:0;">
      <li>Ice Cream:
        <select class="optionsIceCream" name="IceCream">
          <option value="IceCream01">Select Ice Cream</option>
          <option value="IceCream02">Solero Exotic (+$1.85)</option>
          <option value="IceCream03">Magnum Ecuador (+$4.85)</option>
          <option value="IceCream04">Cornetto Enigma (+$2.00)</option>
        </select>
      </li>

      <li>Coffee:
        <select class="optionsCoffee" name="Coffee">
          <option value="Coffee01">Select Coffee</option>
          <option value="Coffee02">Cup of Joe (+$0.99)</option>
          <option value="Coffee03">Cappuccino (+$2.49)</option>
          <option value="Coffee04">Latte Macchiato (+$2.99)</option>
        </select>
      </li>

      <li>Computers:
        <select class="optionsComputers" name="Computers">
          <option value="Computer01">Select Computer</option>
          <option value="Computer02">Dell Inspiron 620 (+$449.99)</option>
          <option value="Computer03">HP Pavilion dv7t (+$949.99)</option>
          <option value="Computer04">iMac 27-inch 3.1GHz (+$1,999.00)</option>
        </select>
      </li>
    </ul>

    Total: <input class="totalAmount" type="text" disabled="disabled" value="0.00" />

  </fieldset>

</form>

<script type="text/javascript">
    //<![CDATA[
        (function () {
            var selects = document.getElementsByTagName("select"),
                L = selects.length,
                i;

            for (i = 0; i < L; i++) {
                selects[i].setAttribute("onchange", "calcTotal();");
            }
        }());

        function calcTotal() {
            var icecream = [0.00, 1.85, 4.85, 2.00],
                coffee = [0.00, 0.99, 2.49, 2.99],
                computer = [0.00, 449.99, 949.99, 1999.00],
                total = document.getElementsByTagName("input")[0],
                select = document.getElementsByTagName("select");

            total.value = (icecream[select[0].selectedIndex] +
                coffee[select[1].selectedIndex] + 
                computer[select[2].selectedIndex]).toFixed(2);
        }
    //]]>
</script>

</body>
</html>

Answer 1

不要将IceCream01，IceCream02等放到其他地方，而是考虑降价。我认为这会让你更容易计算总数


      <li>Ice Cream:
        <select class="optionsIceCream" name="IceCream">
          <option value="0.0">Select Ice Cream</option>
          <option value="1.85">Solero Exotic (+$1.85)</option>
          <option value="4.85">Magnum Ecuador (+$4.85)</option>
          <option value="2.00">Cornetto Enigma (+$2.00)</option>
        </select>
      </li>

使用此模式，您只需获取所选值并将其添加即可。

Answer 2

您可以使用正则表达式查找字符串的数字部分，然后使用parseInt（）来获取数字。

Answer 3

您可以将其与正则表达式匹配：

var re = new RegExp('\\(\\+\\$([0-9.]*)\\)');
var match = re.exec('(+$1.85)');
return match[1];

匹配(+$，数字，)。使用双反斜杠\\进行转义。数字放在括号之间以表示一个组，该组在match[1]中返回。

获取金额并放在其他地方

3 个答案: