Php Javascript代码：使用下拉HTML动态更改货币

我一直在寻找这一整天-改变货币在整个页面时，选择国家或货币从下拉菜单

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

一个很好的例子是：当您从右上角的下拉菜单更改货币时，它会更改主内容中所有包的货币

我是一名HTML开发人员，对javascript知之甚少。请帮帮我

另外，我也搜索了codingforums.com，发现只有两个链接不适合我，因为它们是货币转换器：

---

webapps的美妙之处在于，你可以通过查看源代码（使用类似于FF中Firebug插件的toll）来借用好的想法。正如您在示例中所看到的，当选择不同的货币时，页面将重新加载：

$('#Items, #Items_input').change(function(){
    $.post('/conlogic/ajax.php?action=currency',
        {'curr': $(this).val()},
        function(data){
            if ( data=="OK" ) window.location.reload();
        });
});

---

显然，在本例中，该页面是用不同的货币在服务器端重新呈现的。

我会使用jQuery，所以如果您不想使用外部库，请随意忽略我的答案。可以在www.jquery.com上找到

首先，为应该更改货币的所有地方创建一个范围，将其命名为“currency”，并在name属性中，将值放入“base currency”中。例如：

<span class="currency" name="499"> 499 </span>

当然，你应该尝试使用真实的汇率

---

我为您制作了一个JSFIDLE:

我编写了一个javascript版本。没有Ajax，货币兑换率是从谷歌那里借来的

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>

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);
      }
    }
};

美元
澳元
欧元
英镑
15美元
15欧元
15BGP
15澳元

Javascript代码

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

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);
      }
    }
};

var
选择器=document.getElementById（“currencySelector”）；
变量
currencyElements=document.getElementsByClassName（“货币”）；
变量
美元兑换率={
澳元：1.0490，//1AUD=1.0490美元
欧元：1.4407，//1欧元=1.4407美元
英镑：1.6424，
美元：1.0
};
selector.onchange=函数（）{
变量
toCurrency=selector.value.toUpperCase（）；
对于（var i=0，l=currencyElements.length；i），您应该开始学习编程，并提出编程问题，而不是针对脚本……在运行过程中进行此类转换充满了危险，除非您实际使用的是列出的所有货币（同样，如果您以美元计费，但您已在CAD中显示价格，且汇率发生变化，则他们将以不同于报价的价格计费）。最好坚持使用一种货币，让客户自行寻找自己的资源进行计算。否则，请雇佣一名编码员为您制作此软件-这里没有免费午餐。这读起来有点像“请给我一个代码，kthxbye”问题。我们不是来给您提供完整的工作解决方案的。如果需要，我们会帮助您解决您会陷入困境。此外，您的问题可能不仅仅局限于前端问题。您可能需要与后端交互以获取其他货币的价格，除非后端已经在某些javascript数据对象中提供了价格。