在该网站 http://www.gofundme.com/sign-up/ 他们有很酷的能力，选择您输入金额之下的货币。当您更改货币它改变了你输入的金额旁边的符号。

On the site http://www.gofundme.com/sign-up/ they have the cool ability to select your currency underneath where you enter an amount. When you change the currency it changes the symbol beside the amount you type in.

我想与我网站类似的东西，但没有太多关于如何甚至去做的线索。任何人都可以点我在正确的方向？

I'd like to do something similar with my website but don't have much of a clue about how to even go about it. Can anyone point me in the right direction?

悠着点在我身上的家伙;我以前做了一些网页制作的，但从来没有什么太壮观了。

Go easy on me guys; I've done a bit of website making before but never anything too spectacular.

推荐答案

在该网站上的code是所有客户端，并且是相当简单的。

The code on that site is all client-side, and is fairly simple.

您点击链接，它会调用Javascript的显示选择弹出DIV。

You click the link, it invokes Javascript that shows the selection popup div.

当您选择了选择弹出DIV的项目，它也要求使用Javascript。的JavaScript修改：

When you select an item on the selection popup div, it also calls Javascript. That javascript modifies:

...并关闭弹出DIV。

...and closes the popup div.

编辑：显然，你还需要 jQuery库才能使用code。在我的答案:)你可以代替你自己的JavaScript code，并得到相同的结果，但它不会完全一样低于code。

Apparently you also need the jQuery library in order to use the code in my answer :) You could substitute your own Javascript code, and get identical results, but it wouldn't look exactly like the code below.

下面是code，敲竹杠查看源文件直：

Here is the code, ripped straight off "view source":

金额框中：

<div class="amt_box bg_white">
    <label class="currency-display">$</label>
    <input type="text" name="Funds[goalamount]" value="" class="big-field"
        tabindex="1" />
</div>

打开弹出DIV链接：

The link that opens the popup div:

<h4>Display: <a href="#" class="currency-select">US Dollars</a></h4>

在弹出的div：

The popup div:

<div class="currency currency-select-div" style="position:absolute; display:none;margin-left:45px;">
    <ul>
        <li><a href="#" class="currency-item" title="$" code="USD">&#36; USD Dollar</a></li>
        <li><a href="#" class="currency-item" title="$" code="CAD">&#36; CAD Dollar</a></li>
        <li><a href="#" class="currency-item" title="$" code="AUD">&#36; AUD Dollar</a></li>
        <li><a href="#" class="currency-item" title="£" code="GBP">&#163; GBP Pound</a></li>
        <li><a href="#" class="currency-item" title="€" code="EUR">&#128; EUR Euro</a></li>
    </ul>
</div>

该隐藏的表单字段：

The hidden form field:

<input type="hidden" id="currencyfield" value="USD" name="Organizations[currencycode]" />

中的JavaScript（jQuery的）code结合一起：

The Javascript (jQuery) code that binds it all together:

$('.currency-select').click(function() {
    $('.currency-select-div').show();
    return false;
});

$('.currency-item').click(function() {
    $('.currency-select-div').hide();
    $('.currency-display').text($(this).attr('title'));
    $('.currency-select').text($(this).text());
    $('#currencyfield').val($(this).attr('code'));