Get amount and put elsewhere_问答_开发者_运维开发者技术经验分享

I´d like to get the amount between "(+$" and ")" and add it to the value of the inputbox.

For example, you select the following:

Solero Exotic (+$1.85)

Cappuccino (+$2.49)

iMac 27-inch 3.1GHz (+$1,999.00)

These amounts will be subtracted from the options you've selected:

1.85

2.49

1,999.00

The inputbox will display: 2003.34

Anyone know a javascript code that can do this? (without adding more attributes to the Option tag)

<!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>

****************** UPDATE: 09-09-2011 ******************

I found a solution, thanks to Dominic H from Yahoo! Answers

It's simple but very effective and it works perfectly!

Here's the entire code:

<!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>

Instead of putting IceCream01, IceCream02, etc and for others, consider putting the price. I think that would make it easier for you to calculate the total


      <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>

Using this pattern, you can simply get the selected value and add them up.

You can use regular expressions to find the numerical part of the string, and then parseInt() it to get the number.

You can match it with a regular expression:

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

This matches (+$, numbers, ). Escaping is done with double backslashes, \\. The numbers are put between parenthesis to indicate a group, which is returned in match[1].