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

Question

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

我想在我的网站上做一些类似的事情,但对于如何实现这一点并不知道.谁能指出我正确的方向？

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

Answer 1

该站点上的代码都是客户端的,并且非常简单.

单击该链接,它将调用显示选择弹出div的Javascript.

当您在选择弹出窗口中选择一个项目时,它也会调用Javascript.那javascript修改:

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

...并关闭弹出式div.

编辑:显然你也需要jQuery库才能在我的答案中使用代码:)你可以替换自己的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'));