Javascript代码:使用下拉HTML动态更改货币 [英] Javascript code: dynamically change currencies with dropdown HTML

问题描述

我整天都在寻找-在下拉菜单中选择国家或货币时，请在整个页面中更改货币.

I have been looking for this all day - Change currencies throughout the page when choosing between countries or currencies from dropdown menu.

我基本上需要一个下拉菜单来显示国家或货币.当您选择其中任何一个(例如USD)时，整个页面上的所有价格都将变为USD.现在，如果您将其更改为AUD/CAD/PKR等，它们也会相应更改.我基本上需要用Javascript编写它，但是如果有人可以用PHP提供它，那也是可以的.

What I basically need is a dropdown menu which shows countries or currencies. When you select anyone of it like USD all the prices throughout the page are changed to USD. Now if you change it AUD/CAD/PKR etc they will be changed accordingly. I basically need it in Javascript but if anyone can provide it in PHP, it would be okay too.

一个很好的例子是: http://creativeon.com 当您从右上角的下拉菜单中更改货币时-它更改主要内容中所有包装的货币.

A very good example of this is: http://creativeon.com When you change currency from right top dropdown menu - it changes the currencies of all the packages in the main content.

我是HTML开发人员，对javascript不太了解.请帮我.

I am a HTML developer and do not know much about javascript. Please help me.

P.S.我也搜索了codingforums.com，并发现只有两个链接不可用，因为它们是货币转换器:

P.S. I have searched codingforums.com too and found only two links which are not of my use because they are currency converter:

1. http://www.codingforums.com/showthread.php?t=196577
2. http://www.codingforums.com/showthread.php?t=196373

推荐答案

我写了一个javascript版本.没有Ajax，货币兑换率是从Google借来的.

I write a javascript version. no Ajax, currency change rates was borrowed from google.

HTML代码

  <select id="currencySelector">
    <option value="usd">USD</option>
    <option value="aud">AUD</option>
    <option value="eur">EUR</option>
    <option value="gbp">GBP</option>
  </select>
  <div class="currency" data-currencyName="usd">15<span>USD</span></div>
  <div class="currency" data-currencyName="eur">15<span>EUR</span></div>
  <div class="currency" data-currencyName="gbp">15<span>BGP</span></div>
  <div class="currency" data-currencyName="aud">15<span>AUD</span></div>

JavaScript代码

var 
    selector = document.getElementById("currencySelector");
var
    currencyElements = document.getElementsByClassName("currency");
var 
    usdChangeRate = {
      AUD: 1.0490, // 1AUD = 1.0490 USD
      EUR: 1.4407, // 1EUR = 1.4407 USD
      GBP: 1.6424,
      USD: 1.0
    };

selector.onchange = function () {
    var 
        toCurrency = selector.value.toUpperCase();

    for (var i=0,l=currencyElements.length; i<l; ++i) {
        var 
            el = currencyElements[i];
        var 
            fromCurrency = el.getAttribute("data-currencyName").toUpperCase();

      if (fromCurrency in usdChangeRate) {
          var 
              // currency change to usd
              fromCurrencyToUsdAmount = parseFloat(el.innerHTML) * usdChangeRate[fromCurrency];
          var 
              // change to currency unit selected
              toCurrenyAmount = fromCurrencyToUsdAmount / usdChangeRate[toCurrency];

          el.innerHTML = toCurrenyAmount + "<span>" + toCurrency.toUpperCase() + "</span>";
          el.setAttribute("data-currencyName",toCurrency);
      }
    }
};

运行代码

您可以在 http://jsbin.com/ewuyoq/5 上运行上述代码或进行构建您自己的版本 http://jsbin.com/ewuyoq/5/edit

You can run the code above at http://jsbin.com/ewuyoq/5 or build your own version http://jsbin.com/ewuyoq/5/edit

这篇关于Javascript代码:使用下拉HTML动态更改货币的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！