Javascript代碼：使用下拉菜單動態更改貨幣HTML

我一直在尋找這一整天 - 通過下拉菜單在國家或貨幣之間進行選擇時更改整個頁面的貨幣。Javascript代碼：使用下拉菜單動態更改貨幣HTML

我基本需要的是顯示國家或貨幣的下拉菜單。當您選擇任何一個像美元時，整個頁面的所有價格都會更改爲美元。現在如果你改變它AUD/CAD/PKR等，他們將相應地改變。我基本上需要它在Javascript中，但如果任何人都可以在PHP中提供它，它也可以。

一個很好的例子是：http://creativeon.com當您從右上方下拉菜單更改貨幣時 - 它會更改主內容中所有包的貨幣。

我是一名HTML開發人員，對JavaScript不太瞭解。請幫幫我。

P.S.我已搜查codingforums.com過，發現只有兩個環節這是我使用的不是因爲它們的貨幣轉換：

來源

2011-08-17 HTML Boy

您應該開始學習編程並提出編程問題，而不是腳本...... – Catalin

在飛行中進行這些類型的轉換充滿危險，除非您實際上以所有列出的貨幣對其進行結算（例如，如果您以美元結算，但您已經以加元顯示價格並且匯率發生變化，它們將以與所報價格不同的價格收費）。更好地堅持使用一種貨幣，並將轉換交給客戶，以找到自己的資源進行計算。或者，如果不這樣做，請聘請一位編碼員爲您製作 - 這裏沒有免費午餐。 –

這聽起來有點像'給我這個代碼請，kthxbye'的問題。我們不是在這裏給你全面的工作解決方案。如果您遇到困難，我們會幫助您。此外，您的問題可能不會僅限於前端問題。您可能需要與後端進行交互以獲取其他貨幣的價格，除非後端已經在某些javascript數據對象中提供了它們。 –

Web應用程序的妙處在於，你可以借通過查看源代碼（使用類似FF中的Firebug插件的收費）來獲得好的想法。正如你所看到的例子，你提的是選擇了不同的貨幣時重新加載頁面：

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

與不同的貨幣顯然，在這種情況下，該網頁重新渲染服務器端。

來源

2011-08-17 07:16:13

我會使用jQuery，所以隨時忽略我的答案，如果你不想使用外部庫。它可以在www.jquery.com上找到。

首先，你爲貨幣應該改變的所有地方做一個跨度，給它類「貨幣」，並在名稱屬性中，你把價值放在你的「基礎貨幣」。例如：

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

然後你可以做一個按鈕，說它有ID「showInEuro」。

<input type="button" id="showInEuro" />

然後寫類似這樣的一些jQuery代碼：

var usdToEuroExchRate = 1.5; // Obviously just a magic constant 

// When the button is clicked 
$("#showInEuro").click(function() { 
    // Iterate through all of the currency spans 
    $("span.currency").each(function(index) { 
     // And take their names times the exchangerate and put it in the span. 
     $(this).text($(this).attr("name") * usdToEuroExchRate); 
    }); 
});

當然，你應該嘗試用活生生的匯率。

我做了的jsfiddle你：http://jsfiddle.net/An3v9/9/

來源

2011-08-17 07:20:22

我寫了一個JavaScript版本。沒有阿賈克斯，貨幣變化率是從谷歌借來的。

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

來源

2011-08-17 08:01:50 wukong

Javascript代碼：使用下拉菜單動態更改貨幣HTML

回答

相關問題