Question

在网站http://www.gofundme.com/sign-up/上，他们可以在您输入金额的位置选择您的货币。更改货币时，它会更改您输入金额旁边的符号。

我想和我的网站做类似的事情，但是对于如何去做这件事并没有多少线索。谁能指出我正确的方向？

对我们说好话;我以前做了一些网站制作，但从来没有太过壮观。

Answer 1

该网站上的代码都是客户端的，非常简单。

点击该链接，它会调用显示选择弹出式div的Javascript。

当您在选择弹出窗口中选择一个项目时，它也会调用Javascript。该javascript修改：

金额字段的原始div标签文本（即大€）
下面的文字描述了您当前选择的货币类型（弹出div的那种）
隐藏表单字段中的数据，具有所选的货币类型

...并关闭弹出式div。

修改：显然您还需要jQuery library才能在我的回答中使用代码:)您可以替换自己的Javascript代码，并获得相同的结果，但它不会'看起来与下面的代码完全相同。

这是代码，直接从“查看源”中删除：

金额框：

<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的链接：

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

弹出式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>

隐藏的表单字段：

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

将所有这些绑定在一起的Javascript（jQuery）代码：

$('.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'));

Answer 2

您希望首先使用下拉列表唯一标识您尝试更改的文字。

<span id="currencySymbol">$</span>

然后，您将要创建一个包含所需值的下拉列表。

<select id="currencySelect">
    <option value="$">Dollars</option>
    <option value="£">Pounds</option>
    <option value="€">Euros</option>
</select>

然后，您需要使用JavaScript根据下拉列表的值更改文本的值。

document.getElementById('currencySelect').onchange = function(){
    document.getElementById('currencySymbol').innerHTML = this.value;
}

如何使下拉列表选择更新网页上的图像？

2 个答案: